Menu
Im using this svg tag in my html file. It works perfectly in Chrome, but in safari the icon doesn't appear
<svg width="25" height="23" viewBox="0 0 25 23">
<use href="./icons.svg#helemet"></use>
</svg>
any know why?
852
If you are trying to do an inline SVG I dont think it's supported in Safari: You should try declaring it like you would an image: I would also look into a PNG fallback.
Now, without the forthcoming fix applied, if you looked at it in Safari (I’ve been looking at Version 6.0.5 (8536.30.1)) you would find it looked like this: Safari is oddly computing the height of the SVG incorrectly. If you want to see the difference first hand, with everything else stripped away, here’s a Codepen example:
This is possible by using the SVGs inline within an object tag. For example: Besides being resolution independent, having the SVGs inline in this manner allows them to be manipulated with both CSS and JavaScript. These SVGs are within fluid containers.
The only viable option seemed to be to dynamically set the width/height of the SVG in pixels as the page was resized (it’s only the height that Safari is computing incorrectly so we can use the width to figure the height). Having the height and width of the SVG set with pixels seemed to make Safari happy.
Safari doesn't support href yet, you need to use xlink:href instead.
href is a new feature of the upcoming SVG 2 specification. xlink:href is the SVG 1.1 version.
Chrome, Firefox and Edge support both xlink:href and href.
199
Here is an update from the future 2019.
Just add xlink:
<svg role="img">
<use xlink:href="/path/to/svg#id"></use>
</svg>
Works with IOS 12
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
