Linked images inside SVG

Question

Imagine the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="foo.png" x="0" y="0" width="100" height="100"/>
</svg>

The image, foo.png, resides in the same directory. If we open this SVG in the browser, it will display foo.png correctly. But if we try to use this SVG in <img src="...">, or in <image xlink:href="..."/> inside another SVG, there will be no foo.png displayed. Tested with latest Firefox and Chrome, both with file:// and http://. There is nothing in the console of either browser, and network monitor shows no attempts to load a bitmap.

Am I missing something? I know everything will be OK if I embed foo.png as "data:image/svg+xml;base64,...", but I really want to avoid that. Bitmaps I'm trying to include can be rather huge, so I would better prefer linking instead of embedding.

Answer 1

This is disabled by the browser for security reasons.

From MDN,

Restrictions

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

• JavaScript is disabled.
• External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder object URLs or data: URIs.
• :visited-link styles aren't rendered.
• Platform-native widget styling (based on OS theme) is disabled.

Also, check the details at Bugzilla@Mozilla