Edge not rendering SVG Symbol - svg

I have two pairs of SVG patterns and symbols. The symbol holds and the SVG and the pattern shapes it. I use each pattern as a fill for a Circle.
This approach works fine in chrome but in edge only some svgs render in the circle. Below is an example, on chrome you should see both a shoe and a diamond. On Edge only the diamond renders even thou the approach is the same as the shoe.
CodePen Example
<svg width="660" height="600">
<defs>
<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-shoe" viewBox="0 0 45 45">
</svg>
....SVG code
</svg>
<symbol xmlns="http://www.w3.org/2000/svg" id="symbol-diamond" viewBox="0 0 45 45">
<svg>
....SVG code
</svg>
</symbol>
<pattern id="pattern-diamond" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-diamond" />
<pattern id="pattern-shoe" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<use xmlns="http://www.w3.org/2000/svg" x="6.59" y="6.59" width="31.819" height="31.819" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-shoe" />
</pattern>
</defs>
<circle fill="url(#pattern-shoe)" cx="150" cy="150" r="60" />
<circle fill="url(#pattern-diamond)" cx="150" cy="400" r="60" />

Related

how to use image as background in svg of guitar pick shape

I want fit image under guitar pick shaped svg element
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
<image xlink:href="https://picsum.photos/100" width="100" height="100"/>
</pattern>
</defs>
<path d="M8022.333,4996.688a26.281,26.281,0,0,0-9.242-16.959,36.46,36.46,0,0,0-13.247-6.725c-7.448-2.2-15.127-2.789-24.92-2.885-2.04.143-6.126.319-10.184.74a54.277,54.277,0,0,0-15.884,3.963c-7.753,3.325-13.405,8.534-16.07,16.3a33.98,33.98,0,0,0-.728,18.988,81.581,81.581,0,0,0,8.237,20.654,122.339,122.339,0,0,0,22.1,29.732,38.463,38.463,0,0,0,9.7,7.155,10.077,10.077,0,0,0,9.76-.12,40.637,40.637,0,0,0,4.96-3.138,68.929,68.929,0,0,0,11.474-11.293,122.777,122.777,0,0,0,21.05-35.139C8021.942,5011.088,8023.451,5004.055,8022.333,4996.688Zm-69.877,13.931a4.186,4.186,0,0,0,.876,1.31,4.018,4.018,0,0,0,1.285.865,3.927,3.927,0,0,0,1.556.312,4.04,4.04,0,0,0,3.058-1.394l.3-.32,3.159,1.832-.416.508a7.635,7.635,0,0,1-6.1,3.056,7.428,7.428,0,0,1-2.956-.6,7.814,7.814,0,0,1-2.457-1.672,7.815,7.815,0,0,1,0-10.94,7.805,7.805,0,0,1,2.458-1.672,7.419,7.419,0,0,1,2.955-.6,7.637,7.637,0,0,1,6.1,3.055l.416.508-3.159,1.832-.3-.32a4.044,4.044,0,0,0-3.058-1.394,3.933,3.933,0,0,0-1.556.313,4.027,4.027,0,0,0-1.284.864,4.191,4.191,0,0,0-.877,1.31,4,4,0,0,0,0,3.15Zm24.893,6.026h-3.605v-9.312a2.55,2.55,0,0,0-.774-1.886,2.714,2.714,0,0,0-.836-.568,2.338,2.338,0,0,0-.955-.21,2.462,2.462,0,0,0-1.82.778,2.555,2.555,0,0,0-.773,1.886v9.312h-3.6V4996.51h3.6v5.195a4.915,4.915,0,0,1,2.594-.718,5.935,5.935,0,0,1,2.375.488,6.358,6.358,0,0,1,1.988,1.358l.007.007a6.529,6.529,0,0,1,1.319,2.042,6.42,6.42,0,0,1,.481,2.451Zm9.51-11.571a2.441,2.441,0,0,0-.989-.263,1.891,1.891,0,0,0-1.465.62,2.25,2.25,0,0,0-.645,1.588v9.625h-3.549v-9.625a5.937,5.937,0,0,1,3.22-5.313l.02-.01a5.592,5.592,0,0,1,2.42-.539,5.316,5.316,0,0,1,1.993.382,7.532,7.532,0,0,1,1.933,1.2l.615.506-3.288,1.951Zm18.373,11.571h-3.606v-1.42a7.281,7.281,0,0,1-1.337.875,6.158,6.158,0,0,1-2.817.688,7.68,7.68,0,0,1-3.026-.6,7.26,7.26,0,0,1-2.456-1.713,8.1,8.1,0,0,1-1.654-2.52,7.962,7.962,0,0,1,0-6.048,8.086,8.086,0,0,1,1.66-2.526,7.233,7.233,0,0,1,2.451-1.708,7.667,7.667,0,0,1,3.024-.6,6.521,6.521,0,0,1,2.926.657,6.42,6.42,0,0,1,1.228.792V4996.6h3.606Z" transform="translate(-7931.052 -4970.12)" fill="url(#img1)"/>
</svg>
</div>

SVG transform --> rotate only mask not fill url image

How to transform(rotate) only mask path and not the background image (image fill) ?
Right now I get this (image rotates along with svg transform):
https://postimg.org/image/5ifcpkco5/
My SVG below:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>

You could just rotate the <image> by the same amount in the other direction.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="translate(55.780723, 60.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>
</svg>
But you may find it easier to change the way you do the masking. Don't use a <pattern>, apply a <mask> to an <image> instead.

You can combine rotate and translate into 1 (it will run fast):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
transform="rotate(90.000000, 55.780723, 60.780723)"
/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z" transform="rotate(-90.000000, 55.780723, 60.780723) " fill="url(#img1)"></path>
</svg>

Using filters inside a external symbol

I'm trying to use a external symbol with a filter. Unfortunately it looks like the browsers don't support this feature.
Am I declaring it wrong or hasn't it been implemented?
Example page: http://www.lisa.ink/svg/
Chrome only shows the last svg
Firefox shows the first and second svg as expected
Safari only shows the last svg as expected
1. Using external symbol with only a fragment identifier
html:
<svg>
<use xlink:href="/svg/rect.svg#rect" />
</svg>
external svg:
<svg>
<defs>
<filter id="hueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
<symbol id="rect" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(#hueRotate)" />
</symbol>
</defs>
</svg>
2. Using a external symbol with a full IRI
html:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/svg/rect.svg#rectWithFullUrl" />
</svg>
external svg:
<svg>
<defs>
<filter id="hueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
<symbol id="rectWithFullUrl" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(/svg/rect.svg#hueRotate)" />
</symbol>
</defs>
</svg>
3. Using a external symbol with local
html:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/svg/rect.svg#rectWithMissingFilter" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="missingHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" result="A"/>
</filter>
</defs>
</svg>
external svg:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="rectWithMissingFilter" viewBox="0 0 640 550">
<rect x="0" y="0" width="200" height="200" fill="red" filter="url(#missingHueRotate)" />
</symbol>
</def>
</svg>

How to size an SVG

I am trying to create an SVG sprite.
I have set the SVG image to be 100px wide, 50px height, then offset the second by 50.
How can I set the size of the actual icon? Currently, the icon is huge and not 50px.
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>
This is what I see:

DO NOT USE TRANSFORM FOR SCALING
What you are missing is a defined viewBox.
If you do not define a viewBox the viewBox is the same size as the height and width that you defined.
So when you draw a path and some of its point are above 370 then they will be outside its container. Since your defined size is 100 width by 50 height. Any point with values higher then the size will not be drawn.
when you define a viewBox you can change the size without affecting what is drawn or not.
This is the article i allways use when i forget how to properly scale svgs: https://css-tricks.com/scale-svg/
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px"
viewBox="0 0 500 500">
<defs>
<g id="arrow">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Like this? I just added transform="scale(0.1)" attribute to the g tag to make it 10x smaller
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100px"
height="50px">
<defs>
<g id="arrow" transform="scale(0.1)">
<path d="M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0
L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91
c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166
c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281
c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0
c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z"/>
</g>
</defs>
<use x="0" y="0" style="fill: #333" xlink:href="#arrow" />
<use x="50" y="0" style="fill: #999" xlink:href="#arrow" />
</svg>

Avoiding the clipping of symbols in SVG

For my use it would be convenient for me to have a list of SVG symbols centered on zero, making their placement with use easier. For example a symbol which is simply a circle would have its center at zero and then a given radius. However with the standard clipping that clips away 3/4 of the circle. Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
viewBox="0.0 0.0 230.0 150.0">
<rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
<symbol id="concentric">
<circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
<circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
</symbol>
<use xlink:href="#concentric" x="20" y="20" />
<use xlink:href="#concentric" x="40" y="20" />
<use xlink:href="#concentric" x="60" y="20" />
</svg>
This will result in three uses of the symbol called "concentric" but since the original symbol has two circles at 0,0 three quarters of the symbol is clipped.
What is the easiest way of not clipping the symbols at 0 0?

You can use overflow="visible" to turn clipping off if you don't want it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
viewBox="0.0 0.0 230.0 150.0">
<rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
<symbol id="concentric" overflow="visible">
<circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
<circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
</symbol>
<use xlink:href="#concentric" x="20" y="20" />
<use xlink:href="#concentric" x="40" y="20" />
<use xlink:href="#concentric" x="60" y="20" />
</svg>

Resources