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).

Solution 1

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.

Solution 2

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.

Solution 3

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>

Comments

[Anto Jurković]

Safari comparing to Chrome: Safari puts closing </clipPath> after </image></g>></g> !?

[SuperMan]

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.

[Anto Jurković]

Most probably b.Because of that difference you have wrong output. Opening source in Web Inspector Resources tab shows element </clipPath> where it should be. Opening DOM Elements </clipPath> is at the wrong place. At least with my version of Safari.

[Anto Jurković]

Did you try answer from this question Clipping path in SVG not working in Safari

[SuperMan]

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.

[jchmski]

hey man, did you ever manage to find a way to make this with while using the <img> tag with a .svg file? I've been having the same problem. The only child tags of <g> that I have are <title> 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...

[commonpike]

From stackoverflow.com/questions/4476526/… : If you use <img> tags, then webkit based browsers won't display embedded bitmapped images.

[SuperMan]

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.

[Yona Appletree]

I just ran across this issue, 2 years after it says the underlying bug was fixed. Am I missing something?

[jenson-button-event]

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.

[Stormnorm]

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: <?xml-stylesheet type="text/css" href="svg.css" ?> or have inline styles.