SVG path not scaling - svg
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/
Related
SVG <defs> not included from external target of <use> [duplicate]
I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path.
The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work.
All my testing has been done in Chrome (50.0.2661.94)
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<clipPath id="folder-clip-0">
<path d="..." />
</clipPath>
<symbol id="folder" viewBox="0 0 32 32">
<g class="container" data-width="32" data-height="27" transform="translate(0 2)">
<path d="..." class="..." />
<path class="..." d="..." />
<path clip-path="url(#folder-clip-0)" d="..." class="..." />
</g>
</symbol>
</defs>
</svg>
I'm using it like so:
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/img/path/sprite.svg#folder">
</use>
</svg>
When I use the separate statement it looks like this:
But it should look like this:
The color difference is not relevant, it's just the background when the image was taken.
Edit:
I just discovered that if I dump the whole sprite sheet into the page HTML and reference it locally instead of an external file it works. So I don't know what's wrong with my external reference.
e.g.
<svg>
<use xlinkHref={"/img/path/not/work/sprite.svg#folder"}></use>
</svg>
vs.
<svg>
<symbol id="folder"></symbol>
</svg>
<svg>
<use xlinkHref={"#folder"}></use>
</svg>
This works for me as a fallback, but I'd rather have an external SVG file instead of embedding it in my HTML.
Edit 2:
If the SVG sprite sheet is embeded in the HTML directly using the external link shows the icon correctly.
This seems to be a browser support issue. Using the external reference works as expected in Firefox. Chrome doesn't handle clip paths and some other functions in external references. There's an outstanding bug report filed. Safari also doesn't support it. Related StackOverflow ticket: Why can't I reference an SVG linear gradient defined in an external file (paint server)? Open bugs: https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904
SVG sprite generator converting simple shapes to complex paths
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.
Clip path not displaying properly in SVG sprite when using "use"
I'm trying to hack together a sprite sheet from a set of icons. I know almost nothing about SVG. I can get the simple icons to work, but an icon with a clip path isn't displaying properly. From what I can tell it seems like it's not using the clip path.
The sprite works in jsfilddle and it works if I just load the svg on it's own and include a < use > statement in the SVG. But if I have a separate < use > it doesn't work.
All my testing has been done in Chrome (50.0.2661.94)
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<clipPath id="folder-clip-0">
<path d="..." />
</clipPath>
<symbol id="folder" viewBox="0 0 32 32">
<g class="container" data-width="32" data-height="27" transform="translate(0 2)">
<path d="..." class="..." />
<path class="..." d="..." />
<path clip-path="url(#folder-clip-0)" d="..." class="..." />
</g>
</symbol>
</defs>
</svg>
I'm using it like so:
<svg>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="/img/path/sprite.svg#folder">
</use>
</svg>
When I use the separate statement it looks like this:
But it should look like this:
The color difference is not relevant, it's just the background when the image was taken.
Edit:
I just discovered that if I dump the whole sprite sheet into the page HTML and reference it locally instead of an external file it works. So I don't know what's wrong with my external reference.
e.g.
<svg>
<use xlinkHref={"/img/path/not/work/sprite.svg#folder"}></use>
</svg>
vs.
<svg>
<symbol id="folder"></symbol>
</svg>
<svg>
<use xlinkHref={"#folder"}></use>
</svg>
This works for me as a fallback, but I'd rather have an external SVG file instead of embedding it in my HTML.
Edit 2:
If the SVG sprite sheet is embeded in the HTML directly using the external link shows the icon correctly.
This seems to be a browser support issue. Using the external reference works as expected in Firefox. Chrome doesn't handle clip paths and some other functions in external references. There's an outstanding bug report filed. Safari also doesn't support it. Related StackOverflow ticket: Why can't I reference an SVG linear gradient defined in an external file (paint server)? Open bugs: https://code.google.com/p/chromium/issues/detail?id=109212 https://bugs.webkit.org/show_bug.cgi?id=105904
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
Can you combine multiple svgs with different viewBoxes and customize each in Polymer?
I have multiple svgs that I'd like to use in my application and was hoping to put them in a single custom-svg element to reference individually by id, however, the viewBoxes are different. One svg is defined as <iron-iconset-svg name="club-icon" size="512"> <svg> <defs> <g id="club-icon"> <path d="bunch of numbers"></path> </g> </defs> </svg> </iron-iconset-svg> The other svg is defined as <iron-iconset-svg name="club-icon" size="300"> <svg> <defs> <g id="book-icon"> <path d="bunch of numbers"></path> </g> </defs> </svg> </iron-iconset-svg> Is there a way for each custom icon to define its own viewBox, or must every svg defined within a single iconset share the same properties. For now I have multiple custom element html files, but each custom element is an http request (which I'm trying to minimize).
It can be done using symbols. <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="beaker" viewBox="214.7 0 182.6 792"> <!-- <path>s and whatever other shapes in here --> </symbol> <symbol id="shape-icon-2" viewBox="0 26 100 48"> <!-- <path>s and whatever other shapes in here --> </symbol> </svg> See this article on CSS tricks for a further explanation. https://css-tricks.com/svg-symbol-good-choice-icons/
you might try a transform scale on you g element? <g id="book-icon" transform="scale(1.71)"> 1.71 = 512/300 or if you are using gulp/grunt, you could resize the SVGs to be the same using svg-scaler or the like