Svg image element not displaying in Safari

Question

Safari browser (I'm testing under windows) seems having problem in displaying Svg Image element.

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<img src="image.svg" />

</body>
</html>

And here is the content of the image.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>

Is there any solution or workaround to make this work in Safari?

score 37 · Answer 1 · edited Nov 13 '20 at 17:18

37

In the <image> tag inside the svg element, href works fine in Chrome. To work in older versions of Safari, you need xlink:href. (Also applies to the <use> tag.) Keep in mind xlink:href is deprecated and is being replaced by href. However, it was not supported until Safari 12.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/href

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...>
    <image href="data..." xlink:href="data...">
</svg>

edited Nov 13 '20 at 17:18

Bob Stein

14,529
8
77
98

answered May 03 '17 at 07:45

Patrick Browne

4,840
4
15
14

1

Yaaaaas! Such an easy fix, and yet I spent 3 hours on it. :F – Askdesigners May 03 '17 at 12:49
1

This does work, but what if I'm not able to use `xlink:href` on chrome? for some reason the whole thing gets removed. – OmarAguinaga Sep 12 '17 at 16:46
OmarAguinaga, did you ever find the answer you were looking for? – Samuel Willems Dec 14 '17 at 14:41
3

This is still an issue as of May 30, 2018. an image tag inside an svg requires xlink:href attribute in order for the latest version of Safari to render. href on its own works for chrome, firefox, edge, but not safari. For now, I have both href and xlink:href simultaneously, and they both work in all browsers. – Akshay Dhalwala May 31 '18 at 01:51
2

I'm now using both href and xlink:href until I find a reason not to. Who knows when xlink:href support will actually be dropped? In any case, OP is already using xlink:href. – MarsAndBack Oct 09 '18 at 15:09
Oh, yeah! This fixed the problem in Safari for iPad (Safari desktop works as expected). – Ignacio Segura Jun 27 '19 at 22:22

score 21 · Accepted Answer · answered Dec 02 '14 at 12:27

I think there are two problems here:

You haven't said anything about how large your SVG image is. As a rule, you should at least include a viewBox attribute in the <svg> tag. For example:
```
<svg width="250" height="250" viewBox="0 0 250 250" ... >
```
The other problem is that Safari isn't particularly brilliant at rendering SVGs. However, it tends to do better when you embed them with an <iframe> or <object> tag instead of using <img>. For example:
```
<object data="image.svg" type="image/svg+xml"></object>
```
Also, make sure your server is delivering SVG content with the correct MIME type (Content-Type: image/svg+xml), as this can cause problems too.

So give this a try:

HTML source:

<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<object data="image.svg" type="image/svg+xml"></object>
</body>
</html>

image.svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="250" height="250" viewBox="0 0 250 250"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="50" y="50" width="100" height="100" style="fill:blue"></rect>
      <rect id="foo" x="50" y="150" width="500" height="500" style="fill:green"></rect>
     <image x="50" y="10" width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image>
</svg>

Seems like object element is not clickable when you put it inside an or — Petr Gazarov, Feb 20 '18 at 05:06
Unfortunately its divided between browsers. In Safari it will render if the immediate parent has its height and width defined. In older IE/Edge the svg will fill the grand-parents view box requiring a child shim inside the defined container, which Safari then interprets as an ambiguous field. Having a grand-parent set with the size, and a parent-shim set as width=100%, and then the SVG usually works — ppostma1, Nov 05 '19 at 15:27

score 4 · Answer 3 · answered May 26 '18 at 23:11

I just discovered this same problem when I checked an app I was working on in Safari, after having been using Chrome most of the time. I wrote this bit of TypeScript/jQuery code (easily enough turned into plain JavaScript) to solve the problem:

export function setSvgHref(elem: JQuery, href: string) {
  elem.attr('href', href);

  if (isSafari()) {
    elem.each(function() {
      this.setAttributeNS('http://www.w3.org/1999/xlink', 'href', href);
    });
  }
}

score 2 · Answer 4 · answered Aug 12 '21 at 19:29

2

In my case, the problem was related to <mask> tags in svg. I deleted the following line in my svg component and it started to work on Safari.

<mask id="y9iogdw0wd" fill="#fff">
    <use xlink:href="#jz8vxv0q6c"/>
</mask>

answered Aug 12 '21 at 19:29

Ahmet Emre Kılınç

2,589
4
19
33

score 1 · Answer 5 · answered Jul 09 '20 at 03:05

I had a problem with a wordmark (text that I use as a logo) that I saved as a .svg file. It was on my page with a <img src="...svg"> but did not appear properly in Safari (current version as of July 2020). The SVG worked fine with FireFox, Chrome, and Brave.

I had created the SVG in Inkscape. I selected the entire object, then used Path -> Object to Path... and saved the resulting file.

This rendered properly in all four browsers. (I'm writing this here in case I have this problem again: it'll tell me what I did to fix it.)

score 0 · Answer 6 · answered Feb 10 '22 at 18:28

Be sure to supply your <svg> tag with a height, width, and view box like so. Safari doesn't like it when height or width is set to auto for some reason. ⤵︎

<svg height="16px" width="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M60......"></path></svg>

Svg image element not displaying in Safari

6 Answers6

Linked