Svg with image inside is not showing in safari

Question

Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, safari does not render the image.

Based on the previous similar topic I have tried the following:

SVG <image> elements not displaying in Safari - enclosing

 <use>

tag like this <use></use>

SVG Image dosen't appear in Safari - I dont find this very usefull,cause this is deleting aprt of the svg.

Not able to render SVG image in Safari - Added

<meta http-equiv="Content-Type" content="application/xhtml+xml"> in header.

And beyond that, I dont really know what else to try. Maybe one more interesting thing to note is that inside my page, image is not displayed, but I can open svg file in safari(just the file) and it will be renderd correctly. Further more, after it's opened in the browser as a file, it renders inside the page as well. And I embed the svg to the page with img tag.

<img src="mysvg.svg" class="center-block"/>

This is my svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </defs>
    <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  overflow="visible"></use>
    </clipPath>
    <g id="DSC_x5F_0112-2.psd" clip-path="url(#SVGID_2_)">
        <g id="DSC_x5F_0112-2.psd_1_" enable-background="new    ">

                <image overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
.....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
r/fdeaS//9k=" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
            </image>
        </g>
    </g>
</g>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

I have reduced base64 image string, to shorten the code. Full svg can be found here.

UPDATE: Just to be clear, svg shows in the browser(safari) but image is missing (I can see just border).

Safari comparing to Chrome: Safari puts closing `` after `>` !? — Anto Jurković, Dec 16 '13 at 13:13
Thanks for your comment, but that still does not solve my problem. And also when I inspect element in Safari, when opening just the svg, I can not confirm that your comment is true. It looks ok to me. — SuperMan, Dec 16 '13 at 13:45
Most probably b.Because of that difference you have wrong output. Opening source in Web Inspector Resources tab shows element `` where it should be. Opening DOM Elements `` is at the wrong place. At least with my version of Safari. — Anto Jurković, Dec 16 '13 at 14:09
Did you try answer from this question [Clipping path in SVG not working in Safari](http://stackoverflow.com/questions/14372435/clipping-path-in-svg-not-working-in-safari) — Anto Jurković, Dec 16 '13 at 14:35
Thanks for pointing it out. I have tried switching use with polygon, but still no success. When it's inside dom, image is not displayed. — SuperMan, Dec 16 '13 at 15:01
hey man, did you ever manage to find a way to make this with while using the tag with a .svg file? I've been having the same problem. The only child tags of that I have are and <image> where <image> holds base64 data for a jpeg image. I'm fairly it's the <image> tag causes the trouble because I can replace it with something else and everything works fine...</image></image></image> — jchmski, Feb 14 '14 at 22:49
From http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files#27128309 : If you use tags, then webkit based browsers won't display embedded bitmapped images. — commonpike, Apr 28 '15 at 19:28

score 3 · Answer 1 · answered Nov 25 '15 at 15:32

It looks like this WebKit bug is responsible for the problem: https://bugs.webkit.org/show_bug.cgi?id=99677

The workaround we use in our application is to have a script which finds all img elements displaying SVG images and add hidden object elements loading the same SVGs (<object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object>).

The reason it works is that the object tag properly loads the embedded images into the image cache, so that they are visible within the SVGs loaded using the img tags.

The advantage of this approach is that the images are still displayed using the img tag, so that the workaround can be applied (and later removed cleanly when the browsers are eventually patched) without affecting the rest of the application/website.

The disadvantage is the creation of an extra object tag for each SVG image.

I just ran across this issue, 2 years after it says the underlying bug was fixed. Am I missing something? — Yona Appletree, Jun 23 '17 at 23:11
i have a feeling this issue remains for html loaded after the page is loaded e.g. via ajax. this is my current experience anyway. — jenson-button-event, Aug 18 '17 at 10:40

score 1 · Answer 2 · edited May 23 '17 at 11:53

It seems that answer from this question works: What could make Safari skip clip-path AND mask with SVG?. See instructions in link from answer.

You have to recreate your clip path to make it visible. And </clippath> tag is not pushed after </image> tag.

Here is the little changed code (link to my image inserted so you will have to change it):

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve" >
<g>
    <clipPath id="SVGID_2_">
        <!--use xlink:href="#SVGID_1_"  overflow="visible"></use-->
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414" />
    </clipPath>

    <defs>
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414"/>
    </defs>
</g>

<image clip-path='url(#SVGID_2_)' overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="images/banner_03.jpg" transform="matrix(0.9818 0 0 0.9818 -2.7197 -11.064)">
</image>

<g>
    <path fill="#FFFFFF"  d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

Thanks, but this did not work for me. Also I think is a bit strange solution, cause you are defining the same polygon twice. I will post what worked for me if anyone else stumbles upon this. Thank you for the effort though. — SuperMan, Dec 17 '13 at 22:59
Moving defs to the bottom of svg tag works for me in Safari 16 — Anthony, Jun 27 '23 at 09:00

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

This solution works for me when displaying an embedded SVG image in Safari.

replace

<img src="image.svg">

with

<object data="image.svg" type="image/svg+xml"></object>

edited May 23 '17 at 12:17

Community

1
1

answered May 29 '15 at 03:46

Jun Wang

879
8
10

It does, but you will lose the ability to apply a css class to the svg and style it using a normal stylesheet. You would have to embed an external stylesheet in your svg like this: or have inline styles. – Stormnorm Aug 15 '19 at 07:23

score 1 · Answer 4 · answered Jul 21 '15 at 14:10

I ran into this problem where I was using Ajax to load the svg spritesheet onto the page. If I had a on the page before the spritesheet was loaded, it would fail and would not resolve once the spritesheet was avaialble. Any added to the dom after the spritesheet was loaded were fine. I had to delay putting the items in the dom until after the spritesheet finished loading.

This only affected IOS. All other browsers didn't care about the order.

score 0 · Answer 5 · answered Dec 17 '13 at 23:13

So Anto Jurković pointed out, there are some known issues with Safari and clipPath. What Safari likes is if you dont define polygon but put it straight in to clippPath. Also you must then group clipPath separately.

But I still could not get svg to render the image if I used img tag for svg - <img src="svg"/>. So at the end I have embeded it like this:

<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="328px" height="328px" viewBox="0 0 328 328" enable-background="new 0 0 328 328" xml:space="preserve">
<g>
    <clipPath id="SVGID_2_">
        <polygon id="SVGID_1_" points="1.414,164.001 164,326.586 326.586,164.001 164,1.414      "/>
    </clipPath>
</g>
<image clip-path="url(#SVGID_2_)" overflow="visible" width="338" height="532" id="DSC_x5F_0112-2" xlink:href="data:image/jpeg;base64,/9j/.....r/fdeaS//9k=">
</image>
<g>
    <path fill="#FFFFFF" d="M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
        L164,1.415L1.414,164.002z"/>
</g>
</svg>

I can confirm that this renders correctly in mobile safari(on ipad and iphone, windows safari and mac safari - latest versions).

So to sum it up...I have this svgs in separate html file and render them when needed.

Svg with image inside is not showing in safari

5 Answers5

Linked