img Inside a foreignObject Inside an svg Inside an img <p>Here is my test case.</p> <p><a href="http://tobeythorn.com/isi/dummy2.svg" rel="nofollow">http://tobeythorn.com/isi/dummy2.svg</a></p> <p><a href="http://tobeythorn.com/isi/isitest.html" rel="nofollow">http://tobeythorn.com/isi/isitest.html</a></p> <ul> <li><p>If I just open the svg by itself, the inner img is rendered fine.</p></li> <li><p>But when I make this svg the src of an img, the inner img is not rendered. I receive no errors.</p></li> <li><p>If I make the inner img a data-url, it gets rendered. If possible, I would like to avoid data-urls, as they complicate things, have size limitations, and cannot be cached.</p></li> <li><p>The same thing happens in FF, Chrome, Opera, and Safari.</p></li> </ul> <p>I can't find a solution, but possibly related: <a href="http://stackoverflow.com/questions/15971905/foreignobject-inside-second-svg-element-for-chrome">foreignObject inside second SVG element for Chrome</a></p> <p>Cross-origin issue?</p> <p>Limitation of the spec?</p> <p>Browser bug?</p>