Related
this is the raw code I've received. Just a cross defined as a polygon :
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 115.9 80" style="enable-background:new 0 0 115.9 80;" xml:space="preserve">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5
78.8,40.5 "/>
</svg>
and this is what I've done :
<svg class="icons" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<symbol id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg viewBox="0 0 115.9 80" width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>
following the solution for the same problem someone else had (Cannot Change SVG <use> icon size when linked to <symbol>)
but this is not working :/ I just want for exemple to resize the cross with a 15px width and 15px height.
Could someone provide me the solution as well as some explanations ? thanks : )
If you encapsulate a SVG drawing in a symbol, the viewBox attribute moves from the <svg> to the <symbol> element.
The viewBox values of your source are not really helpful. A tight bounding box around the grafic can be achieved with viewBox="58.2 28.2 20.6 20.6". You can find it with the original file loaded in a browser. Then do
document.querySelector('polygon').getBBox()
The returned object provides you with x/y/width/height values you can feed into the viewBox.
I'd like to point out there is an implicit sizing going on here: The symbol is shown according to the x/y/width/height values of the <use> element where it is referenced. None of them are present; they default to 0 (position) and 100% (size). In other words: the <use> element just fills its surrounding <svg> element, where width and height are set.
<svg class="icons" width="0px" height="0px">
<symbol viewBox="58.2 28.2 20.6 20.6" id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>
I have two SVG's. One just draws a grey circle, the second is a dog paw print. I'm really not good with SVGs and have no idea about combining the two so that the paw print is inside the circle. I have tried various approaches, the circle remains however the paw print is either hidden or just not shown.
<svg class="" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24"><path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
</svg>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="25" height="25" viewBox="0 0 551.062 551.062" style="enable-background:new 0 0 551.062 551.062;"
xml:space="preserve">
<path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</svg>
The solution to your problem is using the paw as a symbol. For the symbol you need to use the same viewBox as the original svg element: viewBox="0 0 551.062 551.062" in this case. Now you can use the symbol and you can give the use element the position (x,y) and the size (width, height) you want.
<svg id="circle" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
<defs>
<symbol id="paw" viewBox="0 0 551.062 551.062" >
<path d="M465.19,453.459c14.749,67.688-58.752,82.375-91.127,73.562s-98.41-10.281-98.41-10.281s-66.218,1.469-98.593,10.281
c-32.375,8.874-105.937-5.875-91.249-73.562s79.438-64.75,97.186-155.999c17.687-91.249,92.718-85.374,92.718-85.374
s74.847-5.875,92.535,85.374C385.875,388.709,450.502,385.771,465.19,453.459z M343.586,206.15
c39.841,11.505,83.844-19.951,98.349-70.258c14.504-50.245-5.998-100.307-45.839-111.812
c-39.842-11.506-83.844,19.951-98.349,70.258C283.243,144.583,303.745,194.645,343.586,206.15z M508.703,187.852
c-38.372-15.668-85.496,10.894-105.264,59.363c-19.768,48.471-4.712,100.43,33.66,116.035
c38.372,15.606,85.496-10.894,105.264-59.364C562.131,255.416,547.076,203.519,508.703,187.852z M207.416,206.15
c39.841-11.506,60.343-61.567,45.839-111.812s-58.568-81.702-98.349-70.196c-39.78,11.505-60.343,61.566-45.839,111.812
C123.572,186.199,167.575,217.655,207.416,206.15z M113.963,363.25c38.373-15.667,53.428-67.626,33.66-116.035
s-66.892-75.031-105.264-59.363C3.987,203.519-11.068,255.478,8.7,303.886C28.467,352.356,75.591,378.917,113.963,363.25z"/>
</symbol>
</defs>
<path fill="#908473" d="M11.948,0C5.36,0,0,5.36,0,11.948c0,6.588,5.36,11.948,11.948,11.948s11.948-5.36,11.948-11.948C23.897,5.36,18.537,0,11.948,0z M11.948,22.447c-5.789,0-10.499-4.71-10.499-10.499S6.159,1.45,11.948,1.45s10.499,4.71,10.499,10.498S17.737,22.447,11.948,22.447z"></path>
<use xlink:href="#paw" x="2" y="2" width="20" height="20" />
</svg>
I have used the code verbatim from this post to dynamically create SVG paths from Lats & Lngs and for 80% of the time it's working very nicely but I have several polygons that are not rendering correctly in SVG
I have prepared an example in JSFiddle showing 1 that works & 1 that doesn't ...
<div style="padding:20px;">
<div>
Top SVG = NOT Working
<svg width="200" height="200" viewBox="227.131 154.886 0.007 0.006">
<path d="M227.125,154.881 227.125,154.881 227.131,154.881 227.132,154.881 227.132,154.882 227.132,154.886 227.132,154.886 227.131,154.886 227.131,154.886 227.129,154.884 227.126,154.881z"> </path>
</svg>
</div>
<div>
Bottom SVG = Working
<svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
<path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
</svg>
</div>
</div>
I'd appreciate it if someone could point out my issue.
ALSO - I would like to know how and where to include a stroke color & width in this html. Thanks!!
I think there are a couple of problems with the first SVG:
The viewBox is incorrect. It doesn't match the shape. It should be more like:
viewBox="227.125 154.881 0.007 0.005"
The first two values (minX and minY) were wrong. How did this happen? I don't know. The code in that question looks alright at first glance, but I haven't attempted to debug it.
Secondly, I think there is likely a floating point issue. There are five orders of magnitude difference between the x and y offset of the shape, and its size. It seems you may be striking some floating point rounding issues, or something like that.
If you reduce the x and y coordinates, the shape renders correctly.
<div style="padding:20px;">
<div>
Top SVG = NOT Working
<svg width="200" height="200" viewBox="7.125 4.881 0.007 0.005">
<path d="M7.125,4.881 7.125,4.881 7.131,4.881 7.132,4.881 7.132,4.882 7.132,4.886 7.132,4.886 7.131,4.886 7.131,4.886 7.129,4.884 7.126,4.881z"
stroke="red" stroke-width=".0002"/>
</svg>
</div>
<div>
Bottom SVG = Working
<svg width="200" height="200" viewBox="227.136 154.905 0.009 0.014">
<path d="M227.145,154.907 227.140,154.905 227.141,154.910 227.138,154.914 227.136,154.919 227.141,154.919 227.145,154.919 227.145,154.916 227.145,154.912z M227.139,154.914 227.140,154.913 227.141,154.913 227.141,154.913 227.141,154.914 227.140,154.914 227.139,154.914z"> </path>
</svg>
</div>
</div>
To avoid this problem with other shapes, you could modify the code to subtract the minX and minY value from all the coordinates. After you fix issue #1, though, of course!
The first SVG is located outside the drawing area/viewBox, however You can add the stroke inside the <g> tag that wraps the graphic, as in the second SVG theres two shapes and I added stroke to one only.
Check this code:
<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" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g stroke-width="3" stroke="#00CF00">
<polygon points="15,81 113,9 170,172 52,189 "/>
</g>
</svg>
<br />
<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" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<circle cx="96.3" cy="93" r="62.3"/>
<g stroke-width="3" stroke="#FFFFFF">
<polygon style="fill:#00CF00;" points="71.7,56 144,92 71.7,128.3 "/></g>
</svg>
Have an interesting one for the hive. I've done quite a bit of searching about and haven't found an answer to this on S.O. or elsewhere.
I am working on making our website as accessible as possible, this includes providing text alternatives to non-text content. (WCAG 1.1.1)
So far, we've followed the recommendations of CSS Tricks and Sitepoint
https://www.sitepoint.com/tips-accessible-svg/
https://css-tricks.com/accessible-svgs/
by adding:
role="img"
<title>
<desc>
and aria-labelledby, and providing an id for each <title> and <desc>
This works a treat when there is only one of a particular icon on the page. The problem arises when we have the same icon on the page more than once. Because our SVG's are being inlined, id'ing the <title> and <desc> tags will cause validation errors, which is also a no-no for accessibility. ( WCAG 4.1.1 )
So the question then becomes, how can we make our SVGs accessible while still maintaining valid HTML? My first thought was to pull the title and desc text into an aria-label on the tag, but would that then read twice to non-sighted users? Is it fine to leave off the aria-labelledby? Any help is much appreciated!
The full SVG code as it currently stands:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve" role="img" aria-labelledby="rings-svg rings-svg-desc" class="rings">
<title id="rings-svg">Ring</title>
<desc id="rings-svg-desc">An empty circle ring</desc>
<g>
<g>
<path fill="#E5E5E5" d="M60,112.151C31.245,112.151,7.85,88.756,7.85,60C7.85,31.245,31.245,7.851,60,7.851
S112.15,31.245,112.15,60C112.15,88.756,88.755,112.151,60,112.151z M60,9.426C32.113,9.426,9.425,32.113,9.425,60
S32.113,110.576,60,110.576S110.575,87.887,110.575,60S87.887,9.426,60,9.426z"></path>
</g>
<g>
<path fill="#E5E5E5" d="M60,117.5C28.295,117.5,2.5,91.705,2.5,60S28.295,2.5,60,2.5s57.5,25.795,57.5,57.5S91.705,117.5,60,117.5
z M60,4.075C29.163,4.075,4.075,29.162,4.075,60S29.163,115.925,60,115.925S115.925,90.838,115.925,60S90.837,4.075,60,4.075z"></path>
</g>
</g>
</svg>
If you can't change the id inside each element, you may be able to insert the accessible alternatives with the id once at the start of the page in a display:none element:
<div style="display:none">
<div id="rings-svg">Ring</title>
<div id="rings-svg-desc">An empty circle ring</desc>
</div>
And then insert your SVG in multiple places in your code
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve" role="img" aria-labelledby="rings-svg rings-svg-desc" class="rings">
<title>Ring</title>
<desc>An empty circle ring</desc>
<g>
<g>
<path fill="#E5E5E5" d="M60,112.151C31.245,112.151,7.85,88.756,7.85,60C7.85,31.245,31.245,7.851,60,7.851
S112.15,31.245,112.15,60C112.15,88.756,88.755,112.151,60,112.151z M60,9.426C32.113,9.426,9.425,32.113,9.425,60
S32.113,110.576,60,110.576S110.575,87.887,110.575,60S87.887,9.426,60,9.426z"></path>
</g>
<g>
<path fill="#E5E5E5" d="M60,117.5C28.295,117.5,2.5,91.705,2.5,60S28.295,2.5,60,2.5s57.5,25.795,57.5,57.5S91.705,117.5,60,117.5
z M60,4.075C29.163,4.075,4.075,29.162,4.075,60S29.163,115.925,60,115.925S115.925,90.838,115.925,60S90.837,4.075,60,4.075z"></path>
</g>
</g>
</svg>
Well this a label I have on a svg image, it works fine on all browsers except Safari where it will not show up and I can't get why this part of the svg doesn't show up....
<g>
<g>
<defs>
<rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"></use>
</clipPath>
<path clip-path="url(#SVGID_8_)" fill="#120F0B" d="M221.463,862.222c0-2.149,1.755-3.904,3.902-3.904h76.462 c2.146,0,5.144-1.242,6.662-2.759l3.254-3.255c1.52-1.52,4.003-1.522,5.522-0.003l3.255,3.258 c1.521,1.517,4.516,2.759,6.665,2.759h78.164c2.146,0,3.902,1.755,3.902,3.904v23.73c0,2.146-1.756,3.903-3.902,3.903H225.365c-2.147,0-3.902-1.757-3.902-3.903V862.222z"/>
</g>
<text transform="matrix(1 0 0 1 277.3213 876.9551)" fill="#FFFFFF" font-family="'FedraSansStd-Normal'" font-size="9.64">Drinkwaterbalans</text>
</g>
and this is the svg tag from the top:
<?xml version="1.0" encoding="utf-8"?>
<!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="600px" height="1000px" viewBox="0 0 625 1000"
enable-background="new 0 0 625 1000" xml:space="preserve"
preserveAspectRatio="xMinYMin none">
Found the answer !
if i removed :
<defs>
<rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect></defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible"></use>
</clipPath>
the grafic shows up even in Safari! and corect
You need to put your SVG declaration before your SVG tag. Add the <g> tag after the <body> tag and put the <svg> tag after the <g> tag.