img Inside a foreignObject Inside an svg Inside an img

Question

Here is my test case.

http://tobeythorn.com/isi/dummy2.svg

http://tobeythorn.com/isi/isitest.html

• If I just open the svg by itself, the inne

Answer 1

All SVGs used as images must be complete in a single file. Images cannot load external data.

So you need to base64 encode the image and embed it into the SVG as a data URL to get it to work.

Answer 2

I can't see your example, but if you using JS to append a html element to svg, you must remember using prefix to tell browser that this element is svg or html.

For example, if you append a html img element:

$('svg').append('svg:foreignObject').append('xhtml:img').attr('src','./foo.jpg');