show SVG with image tag in inline html img tag

Question

In order to transform SVG to PNG, I put svg innerHTML content in an img tag like this :

<img src="data:image/svg+xml;UTF8,<svg> ....</svg>"> />

SVG picture is not correctly displayed especially the pictures inside SVG tag like this (others svg tag are correctly displayed) :

<image xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" xlink:href="../../Content/Images/picture.png" height="38" width="38" y="17" x="17"/>

Are browsers support this case ?

Thanks for your help

Answer 1

For privacy reasons if an SVG file is being used in an image context i.e. via an html <img> tag or as a background CSS image it must be complete in a single file.

This means that any images in the SVG file must be encoded as data URIs.