CODEWITHSUNDEEP
htmlgoogle-chromesvgwebkit
McGarnagle
McGarnagle

Reputation: 102793

IE does, but Chrome/Firefox do not render SVG embedded image in "img" element

I'm trying to reference an SVG file using the "img" tag:

<img width="200" height="100"
     src="test.svg" 
     onerror="this.onerror = null; alert('error');"
     />

Generally this works, but if "test.svg" has an embedded .jpg image, then the image does not render. This is true in Chrome and Firefox -- IE does render the image correctly. Strangely, if I load "test.svg" directly in the browser, then the embedded image renders correctly on each of the browsers.

Here's an example of "test.svg" that shows what I mean:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100">

    <!-- Text and shapes always render correctly -->
    <text x="20" y="20" font-size="20">some text</text>
    <ellipse ry="30" rx="30" 
             cy="50" cx="50" 
             stroke-width="5" stroke="#000000" 
             fill="#FF0000" 
             />

    <!-- Embedded images render in IE, but not in Chrome or Firefox -->
    <image xlink:href="test.jpg"
           width="100" height="100"
           x="100" />
</svg>

I haven't been able to find a definitive answer. Is this a bug in Webkit?

Upvotes: 3

Views: 4230

Answers (2)

Tushar Walzade
Tushar Walzade

Reputation: 3819

You could possibly use an <object> tag with optional fallback to better handle svgs. Here's something you can do -

<object width="200" height="100" data='test.svg' onerror="this.onerror = null; alert('error');">
    <!-- fallback -->
    <img width="200" height="100" src="test.svg" onerror="this.onerror = null; alert('error');" />
</object>

Where, your object tag will be loaded on first priority & if it fails for some reason, then your fallback will be loaded. In this case, I've written your original img as a fallback.

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101918

Any SVG image embedded via the <img> tag must be self-contained. Any external references it has, such as to images, fonts or CSS files, will not be loaded.

The reasons for this are explained here: https://bugzilla.mozilla.org/show_bug.cgi?id=628747

FF and webkit have made this change. I guess IE hasn't yet.

Upvotes: 3

Related Questions