html - 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 inner img is rendered fine.

• But when I make this svg the src of an img, the inner img is not rendered. I receive no errors.

• 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.

• The same thing happens in FF, Chrome, Opera, and Safari.

I can't find a solution, but possibly related: foreignObject inside second SVG element for Chrome

Cross-origin issue?

Limitation of the spec?

Browser bug?

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.