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 40 · Answer 1 · edited Nov 13 '20 at 17:18

40

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

16,271
10
88
101

answered May 03 '17 at 07:45

Patrick Browne

5,290
4
16
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
4

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. – Kalnode 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 26 · 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 10 · Answer 3 · answered Feb 10 '22 at 18:28

10

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>

answered Feb 10 '22 at 18:28

tyirvine

1,861
1
19
29

3

This one solved it for me. – didof Aug 29 '22 at 09:26

score 4 · Answer 4 · 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 3 · Answer 5 · answered Aug 12 '21 at 19:29

3

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 Kilinc

5,489
12
30
42

score 0 · Answer 6 · 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 7 · answered Jun 22 '23 at 16:32

For modern Safari 15.6.1 (Desktop) it will render without any attributes, as long as the height and width are BOTH defined to something other than auto (default).

<svg height="48" width="48">...</svg>

HOWEVER, to ensure it scales properly and can be resized with CSS, it's better to use the viewBox ratio and let CSS do what it does best (and yes, because of Safari, you still need to define both width and height):

<svg viewBox="0 0 48 48">...</svg>

svg {
  width: 96px;
  height: 96px;
}

Svg image element not displaying in Safari

7 Answers7

Linked