SVG sprite generator converting simple shapes to complex paths - svg

Do you know why my simple shapes are being converted to paths (which are more complex shapes)?
I have an example of my file versus what the SVG generator creates: codepen
My svg:
<svg id="cancel" viewBox="0 0 25 25" fill="none" stroke="#000" stroke-width="0.8px" stroke-linecap="round">
<title>Cancel</title>
<circle cx="12.5" cy="12.53" r="12.08" vector-effect="non-scaling-stroke"/>
<line x1="17.86" y1="7.86" x2="7.86" y2="17.86" vector-effect="non-scaling-stroke"/>
<line x1="17.84" y1="17.84" x2="7.88" y2="7.88" vector-effect="non-scaling-stroke"/>
</svg>
Generator svg:
<svg viewBox="0 0 25 25">
<title>cancel</title>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M24.58 12.53c0 6.672-5.408 12.080-12.080 12.080s-12.080-5.408-12.080-12.080c0-6.672 5.408-12.080 12.080-12.080s12.080 5.408 12.080 12.080z"></path>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M17.86 7.86l-10 10"></path>
<path fill="none" stroke="#000" stroke-width="0.8" stroke-miterlimit="4" stroke-linecap="round" stroke-linejoin="miter" d="M17.84 17.84l-9.96-9.96"></path>
</svg>

Primitives are rewritten as paths, presentation attributes have been moved from the <svg> element to the contained <paths>s. An id attribute has been removed. If the web services you are using have reasons for doing that, they do not publicly share them (or at least I haven't found doc on that). Giving opinions on the why must remain outside the scope of this answer.
The attribute vector-effect="non-scaling-stroke" you used is not part of the SVG 1.1 specification, but only SVG 1.2 Tiny and the SVG 2 draft. Internet Explorer does not support this attribute, so removing it improves browser compatibility.
Adding stroke-miterlimit="4" is objectivly useless, as that is the default value.
There is a library svgo that could rewrite the code in the way you see it (almost, excluding the default value issue), but I cannot tell for sure if the services are using that.

Related

SVG path not scaling

I've looked at a few similar questions but can't seem to find an answer for what seems like something rather easy to do. Like the title says i'm trying to scale an svg using the viewBox method. It's scaling the svg no problem, but it's not scaling the paths within the svg. Here's the code i'm using:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 659 659" xmlns:xlink="http://www.w3.org/1999/xlink" width="659" height="659">
<g>
<path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"></path>
<path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"></path>
<path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
C330.021,407.152,300.56,421.787,269.654,429.34z"></path>
<path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
C362.457,380.556,362.226,380.637,361.996,380.637z"></path>
<path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"></path>
<path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
C29.098,112.893,28.768,113.072,28.427,113.072z"></path>
</g>
</svg>
I've also tried scaling up using CSS but again it only seems to scale the main svg container and not the paths within. Tried using:
svg{width:659px;height:659px;}
I can get it to scale using
transform: scale(1.3);
But it's not very accurate in sizing. I need this to be pixel perfect.
Here's a jsFiddle: https://jsfiddle.net/alexgomy/j1g4hms8/1/

SVG use linked from an external source not showing svg data

I have an html page with two svg use elements:
The first references inline svg.
The second references an external svg file (same code).
I am trying to figure out why the second example does not show the svg paths even though the SVG code that is inline is exactly the same as the SVG code in the linked file.
https://s3.amazonaws.com/jagger/svg/index.html
<svg class="svg-inline">
<use xlink:href="#test" />
</svg>
<svg class="svg-external">
<use xlink:href="sprite.svg#test" />
</svg>
<svg width="0" height="0">
<symbol id="test" viewBox="0 0 600 600">
<title>Test Icon</title>
<rect id="svg_2" height="214.39594" width="481.62782" y="10" x="10" stroke-width="5" stroke="#000000" fill="none"/>
<line fill="none" stroke="#000000" stroke-width="5" x1="10" y1="10" x2="400" y2="400" id="svg_1"/>
</symbol>
</svg>
using of external sprite is working in the latest version of all modern browsers
still problem in actual IE and older browsers versions
see MDN <use> browser_compatibility table
for IE (and older browsers) just use polyfill svg4everybody

SVG fills in external file

Really basic SVG question. I have read
SVG sprite in external file
and it works fine for me to add a svg graphic, but I can't get it to work with defs. First the file 'defs.svg':
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs id='patternDefs'>
<pattern id="pattern1"
x="2" y="2"
width="5" height="5"
patternUnits="userSpaceOnUse" >
<circle cx="2" cy="2" r="2" class="blue" />
</pattern>
</defs>
</svg>
and then the svg in a separate file:
<svg>
<use xlink:href="defs.svg#patternDefs"></use>
<circle cx="15" cy="15" r="50" stroke-width="2" stroke="red" fill="url(#pattern1)" />
</svg>
I am looking to get the fill="url(#pattern1)" part to work, as that is what is referencing the def in the external file.
Sorry if you think this has been answered elsewhere but I've read a ton of stuff and thought that if I could get the sprite version to work then why not a defs version. (I am very new to svg)
xlink:href="defs.svg#patternDefs" should be xlink:href="defs.svg#pattern1"
On top of that <use> has to point to something to be rendered, not a pattern. If you want to fill a circle with a pattern just set the circle's fill to the pattern. E.g.
<svg>
<circle cx="80" cy="80" r="50" stroke-width="2" stroke="red" fill="url(defs.svg#pattern1)" />
</svg>
Note that external fills are not widely supported, although they do work on Firefox for instance.

Responsive SVG sprites

I am building an icon system for a site and moving away from png and font-icon sprites to SVG.
I need it to work across all major browsers (IE9+) and ideally want to use fragment identifiers or, as a second best alternative, inline. I've done extensive research, and there isn't a great deal out there, and from what I have read SVG sprites aren't particularly responsive.
For fragment identifiers, using img tag, I have to set the width/height to the same size as the viewbox. Increasing the dimensions on the img tag ends up revealing some of the next sprite. I'd like to be able to use percentage values so the sprite fragment fills the parent container.
I just want confirmation that this isn't possible, I can't find anything that suggests I am wrong to think this.
This is very much possible and is relatively easy to accomplish. SVG's are vector graphics and therefore, if done correctly, will be the most responsive graphics on your website.
Set your SVG file up as expected but put each sprite into a <g> tag with its own identifier.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="sprite" id="circle">
<ellipse cy="50" cx="50" ry="45" rx="45" stroke-width="5" stroke="#00ff00" fill="#00ff00" fill-opacity="0.75" />
</g>
<g class="sprite" id="square">
<rect y="5" x="5" width="90" height="90" stroke-width="5" stroke="#ff0000" fill="#ff0000" fill-opacity="0.75" />
</g>
<g class="sprite" id="triangle">
<path d="M20,7 L92,50 L6,93 z" stroke-width="5" stroke="#0000ff" fill="#0000ff" fill-opacity="0.75" />
</g>
</svg>
Add some CSS to say only the rargeted one needs to be displayed
<defs>
<style><![CDATA[
.sprite { display: none; }
.sprite:target { display: inline; }
]]></style>
</defs>
Then you can just call these out whenever required using an img tag or background element etc.
You can find the fully explained writeup here:
How to Use SVG Image Sprites

Externally defined markers don't appear in SVG

I'm trying to make the markers unified for a bunch of SVG images. My problem is that I cannot make external references in marker definitions work. It may be connected to question How to reference external svg file in svg correctly? but a link is still missing.
I made a little example to demonstrate my problem:
b.svg (which is referenced):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="b" r="6" stroke="black" fill="green" />
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#b" />
</marker>
</defs>
</svg>
a.svg (trying to reference b.svg):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<circle id="a" r="6" stroke="black" fill="yellow" />
<marker id="a_end"
orient="auto"
style="overflow:visible">
<use xlink:href="#a" />
</marker>
<marker id="b_end"
orient="auto"
style="overflow:visible">
<use xlink:href="b.svg#b" />
</marker>
</defs>
<path d="m 10,10 20,20" style="marker-end:url(#a_end)" stroke="black" />
<path d="m 40,10 20,20" style="marker-end:url(#b_end)" stroke="black" />
<path d="m 70,10 20,20" style="marker-end:url(b.svg#b_end)" stroke="black" />
</svg>
As you can see, I referenced the marker for the first line via an internal id (actually two since the marker has a reference, too). This works fine.
I used an internal marker definition with an external path for the second line. It doesn't work. (The line is diplayed, the marker isn't.)
I used an external marker in the third line. It doesn't work either.
The problem may be that the external content isn't in the hosting DOM - at least not when the reference in the style is resolved.
OK, but what can I do about it? How can I reference external elements for markers in SVG?
I think I can answer my original question based on my experiments and on the comment left by Robert.
The code I wrote should work in SVG and it does work with Opera and Firefox. Plus it works when generating a PDF with Apache FOP which was the key point for me.
The only problem is that external referencing doesn't work in IE, Chrome and Safari. I'm not sure when external references from style definitions were implemented in Firefox: it doesn't work in 7.0 but it works in 11.

Resources