Bitmap in SVG not rendering in Safari

Question

In this project: https://test.restaurantacasa.cat/

I use vectors as restaurants logos. In some of them, I include (embed in the svg) a bit of bitmap, for an example, here:

https://test.restaurantacasa.cat/#!/restaurant/el-campanar

However, if you open that one in Safari (mobile or desktop), you'll notice that the bitmap section is not rendered.

Can you help me understand why?

I produce the vectors with Adobe Illustrator.

Answer 1

I also had this issue and found a solution which I thought was worth posting here.

I was embedding the SVG as an object:

<object data="path_to_file.svg" />

and the object was including the image as:

<image href="raster.png" />

This worked everywhere except Safari. I found out that the proper syntax to use is this:

<image xlink:href="raster.png" />

Furthermore, if you are javascripting, it's not sufficient to just setAttribute() you need to setAttributeNS() like so:

el.setAttributeNS("http://www.w3.org/1999/xlink","href","raster.png")

Also, be sure to include the xlink NS at the top of the SVG file in the SVG tag:

<svg ... xmlns:xlink="http://www.w3.org/1999/xlink" ...>

(based on info I found here)

Answer 2

Have you tried using <object> to embed your SVGs, instead of <img>? <object> elements don't have the same restrictions on external references that <img> does.

Answer 3

This is a known bug with Safari.*

When you use SVG as an <img>, external files such as embedded images are not loaded (in any browser). To get around this restriction, Illustrator converts embedded images to data URI values, so that all the data for the embedded image is stored in the SVG file.

For most browsers, this is enough. However, Safari treats the data URI value the same as any other URL referencing an external file, and does not process/load it.

---

* Scroll down the comments on the linked bug report, it took people a while to figure out what the problem was! The main discussion starts around comment 16.