Related
I have a webpage with lots of SVG icons that will be in the HTML. Rather than include them as an IMG tag and possibly slow the page with those HTTP requests, I'm placing the SVG code like this:
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="9" viewBox="0 0 9 9"><path fill="#C5C2BD" fill-rule="nonzero" d="M4.5 3.435L1.286.22A...LOTS OF CODE HERE..."/></svg>
Note: where it says "lots of code here", there is a huge string of numbers/letters that make up the path for this SVG.
The issue this creates is it's very ugly when not easily maintainable in the HTML (to the point where my editor bogs own because these SVG strings are so long).
Is there a cleaner, simpler way to include these SVG icons in my HTML while still eliminating the extra HTTP requests?
Thanks for your time.
The most proven way is to collect all the icons SVG in one file - the sprite SVG
Creating a Sprite and connecting it to HTML
The action plan is as follows:
Creating a Sprite
Connecting it to HTML
Calling SVG images from the sprite
Styling icons
Creating a Sprite
The main task of the sprite is to be a repository for icons that before the call to a specific place HTML pages should be invisible.
To do this,the code for each icon is wrapped with <symbol id =" .. "> ... </ symbol> tags with a unique identifier, which will be followed by the <use>
Template Sprite:
<div id="container">
<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 126 126" >
<symbol id="picasa">
<path d="M113.5 57.... 72.8z" />
</symbol>
<symbol id="wordpress" viewBox="0 0 126 126">
<path stroke ="black" d="M113.5 57.7l-8.5-11.4 .. 86.1 62.9z"/>
</symbol>
<symbol id="twitter">
<path d="M113.5 57.6l-8.5-11.4.... 7.4-2.4V85.4z"/>
</symbol>
<symbol id="apple">
<path d="M113.5 57.7l-8.5-11.4... 78.5 78.7 82z"/>
</symbol>
</div>
As you can see, all <path> attributes are removed for later styling of icons from an external CSS file.
Adding a sprite file to HTML
There are several ways to add SVG files to HTML, but the most reliable way is to add it using the <object>
<object type="image/svg+xml" data="Sprite.svg" width="200" height="200">
Your browser does not support SVG
</object>
Adding icons from the sprite
<div id="container">
<svg viewBox="0 0 126 126" >
<use xlink:href="#apple"></use>
</svg>
</div>
The viewBox attributes should be like thesvg icon or change the scaling inside HTML if necessary.
Icons as links
For this, in SVG, unlike HTML, its own form of record
<svg viewBox="0 0 126 126" >
<a xlink:href="https://www.apple.com/ru/"><use xlink:href="#apple"></use></a>
</svg>
Styling icons
When using the <use> command, the icon falls into the shadow DOM and its attributes behave strangely, - there is an icon of the icon, but it can not be controlled from the outside.
In addition, the icon attributes for example: style = "fill: gray; stroke: crimson;" have the highest priority. Therefore, we deleted these attributes. see the example of the sprite above.
To solve the problem of inheritance of parental properties by objects in shadow DOM, you must use forced inheritance
svg path{
fill:inherit;
stroke:inherit;
}
and then to the icons you can already apply CSS rules from the external table
svg path:hover{fill:yellow;}
#picasa{fill:black;}
#apple{fill:purple;}
#twitter{fill:black;}
#wordpress{fill:blue;}
If you go for the first time along this path, then inevitably there will be many questions.
Ask, do not be shy.
All sooner or later it turned out to be done and customized sprite.
The main recommendation is to do everything yourself manually for the first time, to understand how it is arranged, and then you can already openly use special utilities to automatically create sprites.
You should convert all your .svg files to one font file, here is how:
How to convert .svg files to a font?
I'm trying to use an SVG to mask an image.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=500 height=300>
<defs>
<clipPath id="clip">
<path d="M2.16,1.363h23.699c13.739,0,24.899,10.74,24.899,23.999s-11.16...
<img width="500" style="clip-path: url(#clip);-webkit-clip-path: url(#clip);" />
It works but I want the clipPath size to match the media. In Chrome I can control the size of the clipPath with CSS but in FF the clipPath stays small. In Safari with one asset nothing appears and with another it appears off-center.
I've read other questions that talk about using clipPathUnits:
<clipPath id="clip" clipPathUnits="objectBoundingBox">
But I cannot get this to work at all. Apparently it expects the paths units to be decimals... but my shape is too complicated to write by hand and I don't know of any design software that supports that format.
Update
Following Robert's comments, I tried adding a CSS transform to the clipPath to "translate" the units...
#clip {
-webkit-transform:scale(0.004195862879,0.005554321262);
transform:scale(0.004195862879,0.005554321262);
}
This allowed objectBoundingBox to work as expected in Chrome. But still no luck with Safari or FF. It appears that Safari still renders the clipPath outside the the element to be clipped... making it invisible. FF developer tools make it less clear where it's placing the clipPath.
Run into this problem right now and found the solution. Thanks #RobertLongson for mentioning that when you applying clipPathUnits="objectBoundingBox", you should be sure that all of your coordinates are between 0 and 1. It means, that if you have, for example, a circle
<svg viewBox="0 0 20 20">
<defs>
<clipPath id="clip">
<circle cx="10" cy="10" r="10" />
</clipPath>
</defs>
</svg>
then with clipPathUnits="objectBoundingBox" it should looks like this:
<svg>
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<circle cx="0.5" cy="0.5" r="0.5" />
</clipPath>
</defs>
</svg>
In case of complex paths, I found one solution. All you need is an application for vector images editing. For Linux it could be Gravit Designer (I used it and it worked).
Create new file of size 1x1
Open you svg that contains your complex path without clipPath tag. If you don't have such source, then you can simply create new text file, paste your <path .../> into <svg>...</svg> and save it with *.svg extension, and then open it in your application (Gravit Designer).
Copy your complex path from opened svg and paste it into created new file (1x1).
Turn off "Preserve aspect ratio" (or something simillar) function if it enabled
Set this parameters for your complex path: Width: 1px, Height: 1px, Top: 0px, Left: 0px.
Save this 1x1 file as svg.
Open this svg file in text editor and copy the value of d attribute.
Now you have your complex path in relative coordinates. Set it into you clip
...
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="/* your copied value */" />
</clipPath>
...
Done! Now you can enjoy your responsive clip path without any additional transformations or other workarounds.
I know, it looks too complicated, but it really will be done in approximately 2 minutes (if you have vector image editing software installed).
Hope this helps someone despite of question was asked 1.5 years ago :)
I was using Adobe Illustrator to try and shrink my vectors down to 1px by 1px, and it wasn't capturing all of the coordinates correctly. I instead found this awesome online tool that will convert SVG path coordinates to CSS clip-path friendly coordinates relative to a "1" unit without needing a vector editing program. The quality is much better than Illustrator and easier to use. 🙌
https://yoksel.github.io/relative-clip-path/
I got a similar problem, I solved it like this:
I transfer the svg file to figma (drag and drop)
I align to a square 100 by 100 (without preserving the sides)
export the file as svg
I upload the file to the service https://betravis.github.io/shape-tools/path-to-polygon/ (not advertising, you can use something else)
I get a clean polygon as a percentage, which can be used in clip-path;
example:
.elem-to-path{
clip-path: polygon(89.758% 99.457%, 67.178% 99.862%, 39.660% 99.621%, 7.748% 98.475%, 5.924% 98.004%, 5.742% 97.859%, 4.348% 92.036%, 1.807% 80.831%, 0.174% 36.869%, 1.052% 1.541%, 1.301% 1.012%, 2.237% 0.790%, 62.832% 0.559%, 78.860% 0.810%, 88.832% 0.810%, 96.913% 1.195%, 98.441% 3.283%, 99.616% 24.932%, 98.813% 86.202%, 96.703% 95.116%, 89.758% 99.457%)}
I'm having problem showing SVG logo image for my website project:
I can see slight thin dark line around the edge(border) of the vector object.
It seems to be prevalent around curves.
There's no border, at least when it's created on Illustrator,
nor any other dark-colored object hidden beneath.
As far as I have tested, it seems to be fine on Firefox, Safari, IE11,
but not for Chrome(v43) and Android-Stock-Browser(v4.2).
edit:
I made a sample here.
It has 'S' shaped orange object on square background object with the exact same color. No object here has border.
This is made on Illustrator CS3, and I created SVG file with the same, as how it originally was done for my project.
Here's screenshot comparison:
And fiddle:
http://jsfiddle.net/alexklaus80/tp0adzqn/
Here's the code of SVG file that used in this example:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="Layer_copy">
<rect x="-30.987" y="-30.357" style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" width="156.636" height="156.634"/>
<g>
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" d="M70.966,51.515c1.779,1.968,3.086,4.138,3.934,6.476
c0.854,2.356,1.277,5.081,1.277,8.194c0,7.416-2.74,13.531-8.225,18.345c-5.482,4.812-12.287,7.218-20.413,7.218
c-3.745,0-7.49-0.587-11.239-1.748c-3.747-1.164-6.98-2.575-9.703-4.227l-2.544,4.314h-4.735l-0.832-28.755h4.795
c0.982,3.548,2.134,6.755,3.454,9.612c1.327,2.861,3.067,5.539,5.24,8.019c2.048,2.333,4.449,4.18,7.19,5.562
c2.737,1.385,5.924,2.075,9.552,2.075c2.726,0,5.099-0.363,7.132-1.069c2.031-0.71,3.674-1.72,4.936-3.023
c1.266-1.302,2.203-2.83,2.814-4.599c0.605-1.755,0.912-3.781,0.912-6.064c0-3.356-0.945-6.488-2.838-9.396
c-1.895-2.9-4.721-5.099-8.463-6.603c-2.561-1.023-5.502-2.151-8.816-3.393c-3.315-1.238-6.173-2.407-8.577-3.504
c-4.736-2.127-8.412-4.915-11.037-8.368c-2.621-3.454-3.935-7.958-3.935-13.514c0-3.195,0.652-6.169,1.954-8.935
c1.298-2.756,3.155-5.228,5.559-7.392c2.283-2.052,4.988-3.663,8.106-4.82c3.115-1.167,6.367-1.748,9.758-1.748
c3.865,0,7.328,0.592,10.387,1.778c3.055,1.18,5.85,2.565,8.365,4.138l2.432-4.022h4.729l0.473,27.869h-4.785
c-0.867-3.198-1.844-6.255-2.934-9.172c-1.082-2.916-2.496-5.56-4.227-7.927c-1.697-2.288-3.768-4.115-6.219-5.475
c-2.441-1.358-5.437-2.04-8.987-2.04c-3.748,0-6.941,1.203-9.585,3.609c-2.645,2.408-3.971,5.347-3.971,8.815
c0,3.633,0.856,6.635,2.552,9.024c1.692,2.387,4.156,4.352,7.396,5.886c2.877,1.38,5.706,2.578,8.495,3.58
c2.776,1.004,5.469,2.081,8.071,3.229c2.365,1.022,4.645,2.187,6.834,3.487C67.448,48.261,69.354,49.776,70.966,51.515z"/>
</g>
</g>
</svg>
So it supporsed to look like just an orange square, but on Chrome, it shows the letter S with slight brownish bordering.
I have been searching for similar issue on web but I got no clue.
I'm guessing that it's generator (Illustrator CS3)'s problem??
I found the solution, but I got much more semantic solution thanks to #PaulLeBeau in comment section, so I put this first.
Sample code: Before
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0.2;" .. />
1. Remove stroke:#EF8200;, and change the value of stroke-width from 0.2 to none
<path style="fill:#EF8200;stroke-width:none;" .. />
Or.. there were other solutions which I found by myself.
It doesn't look as good as the one above, but I'll lay it here just for the reference to say that it indeed does solve it.
2. Change the value of stroke-width from 0.2 to 0
<path style="fill:#EF8200;stroke:#EF8200;stroke-width:0;" .. />
3. removing stroke:#EF8200;stroke-width:0.2;
<path style="fill:#EF8200;" .. />
I do not understand why Illustrator adds width to the object that doesn't originally have stroke.
Maybe this is bug for the both Illustrator CS3 and Chrome/Browser?
When editing on Illustrator, check that there is no stroke added (see image) on the background you are using
Double click the background and "Stroke" value change it to zero
That's the way I easily removed the stroke that appeared in one of the logos createdenter image description here
I have an html segment like this
<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
</object>
</div>.
When i see the inspect element in Firefox/firebug i can't see the SVG file structure,
but in Chrome i am able to see the svg file structure like below:
<div id="imageholder>
<object data="1.svg" width="100%" height="100%" type="image/svg+xml">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-dasharray="none"
shape-rendering="auto" font-family="'Dialog'" width="4800">
<desc>widthmm=90.48768097536195 heightmm=49.38127063754128</desc>
<g>
<g>....</g>
</g>
However, i am not able to locate svg tag or any g element through X-path. I tried with
//div[contains(#id='imageholder')]
then i get the element correctly.
//div[contains(#id='imageholder')/object]
also returns element correctly. But
//div[contains(#id='imageholder')/object/svg]
fails.
My requirement is: I need to click on several g elements of SVG image, but i am not able to reach it.
Your help will be appreciated.
Thanks
Some more details added on:[Dec 8,2011]
driver.findElement(By.xpath("//div[#id='imageholder']/object"));//This worked correctly
driver.findElement(By.xpath("//div[#id='imageholder']/object/*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']"));//did not work
I also tried all the possible combination XPath - Find elements by attribute namespace given on this link but could not succeed.
Thanks
For more details, please find the sample code.
Sample.html
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9;chrome=IE8">
<body>
<div id="imageholder"><object data="1.svg" width="100%" height="100%" type="image/svg+xml"></object></div>
</body>
</html>
1.svg
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg stroke-dasharray="none" shape-rendering="auto" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'"
width="4800" text-rendering="auto" fill-opacity="1" contentScriptType="text/ecmascript" color-interpolation="auto"
color-rendering="auto" preserveAspectRatio="xMidYMid meet" font-size="12" viewBox="0 0 4800 2619" fill="black"
xmlns:xlink="http://www.w3.org/1999/xlink" stroke="black" image-rendering="auto" stroke-miterlimit="10"
zoomAndPan="magnify" version="1.0" stroke-linecap="square" stroke-linejoin="miter" contentStyleType="text/css"
font-style="normal" height="2619" stroke-width="1" stroke-dashoffset="0" font-weight="normal" stroke-opacity="1"
>
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
<circle cx="6cm" cy="2cm" r="100" style="fill:red;"
transform="translate(0,50)"/>
<circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
transform="translate(70,150)"/>
<circle cx="6cm" cy="2cm" r="100" style="fill:green;"
transform="translate(-70,150)"/>
</g>
</svg>
Please click on sample.html once you save the files.
//div[contains(#id='imageholder')/object/svg fails because you didn't tell the processor that the namespace of the svg element is not the same as the other. See the xmlns="http://www.w3.org/2000/svg".
You can write : //div[contains(#id,'imageholder')]/object/*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg'].
EDIT (after reading your update) :
Problem can be : in your original html file, you have a link to the svg file in your object element.
Even if your browser incorporate the svg file in the dom, the XPath expression seems to act on the original file itself (with the href). Sorry, but I'm not aware of those kind of use cases for XPath, and can't tell you more.
Got some work around to get SVG embedded document. It doesn't seems to be possible via WebElement. But through JavaScriptExecutor, we can get the complete DOM reference and through standard DOM pattern it is possible.
Like: We can do->docuemnt.getElementsByTagName('OBJECT').contentDocument. This will give the complete SVG DOM reference.
The link below doesn't seem to be the direct answer of it, but possibility of Sel2.0 can be seen through this.
Selenium: Can I set any of the attribute value of a WebElement in Selenium?
Might be helpful for all:-)
Thanks
Switch to the default frame before trying to access the SVG tag, i.e frame(0).
Tried many XPath solutions nothing worked, but switching to frame worked as a charm, its treating SVG as a frame here.
System.setProperty("webdriver.gecko.driver", "C:\\Users\\Administrator\\Downloads\\geckodriver-v0.18.0-win64\\geckodriver.exe");
WebDriver d = new FirefoxDriver();
d.navigate().to("file:///C:/Users/Administrator/Desktop/sample/svg.html");
Thread.sleep(2000);
d.switchTo().frame(0);
Actions builder = new Actions(d);
WebElement svgObject = d.findElement(By.xpath("(//*[name()='svg']/*[name()='g']/*[name()='circle'])[2]"));
//"style" here prints the colour of the second circle in the svg tag. ie( blue circle)
System.out.println(svgObject.getAttribute("style"));
System.out.println(svgObject.getAttribute("transform"));
System.out.println(svgObject.getAttribute("cx"));
System.out.println(svgObject.getAttribute("cy"));
System.out.println(svgObject.getAttribute("r"));
builder.moveToElement(svgObject).click();
I have an SVG document here
On firefox, everything works as expected. However, google chrome appears to think this line:
<image ... xlink:href="/textures/Cube top.png" />
references http://minecraft-cube.comuv.com/index.svg,
not http://minecraft-cube.comuv.com/textures/Cube top.png,
resulting in unexpected recursion.
Obviously, I'd much prefer it if it used the image I specify.
What is going on here?
EDIT: Filed bug #68732 in Chrome. May still be doing something wrong though.
I think that your problem exists elsewhere. Here is a simplified version of your document that correctly shows the linked image:
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="0 0 48 84" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="top-tile">
<image width="1" height="1" x="-0.5" y="-0.5" class="face"
xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png" />
</g>
</defs>
<g transform="scale(16)">
<g transform="translate(1.5, 1.5)">
<use xlink:href="#top-tile" />
</g>
</g>
</svg>
If I use absolute paths to your images and remove the clip-path attributes I see your images in Safari and Chrome. If I put the clip-path back in I see all black fill in Safari, but what is presumably correct in Chrome. If you put in absolute paths (e.g. xlink:href="http://minecraft-cube.comuv.com/textures/Cube top.png") does it work for you in Chrome?
Now that I see what you are trying to make, I wish I could give you +2 for making a fold-up Minecraft tile :)
Edit Next Steps:
Remove the space from your file name.
Try using a relative path instead of absolute.
Now that we know better the core issue, Google for more answers (I haven't found any)
Pare it down to a trivial test case and file a bug against Chrome.
Edit 2: As shown in the updated question, #Eric did file a bug against Chrome. As shown in that bug report, newer versions of Chrome display the intended result. Further, a slightly modified test case using explicit pixel-based image height and width, and pixel-based SVG viewBox and dimensions works in all browsers tested.