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?

Solution

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.