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, saf

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

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.