在内联html img标记中显示带有图像标记的SVG

show SVG with image tag in inline html img tag

本文关键字：图像 SVG 显示 html img 更新时间：2023-09-26

为了将SVG转换为PNG，我将SVG innerHTML内容放在一个img标记中，如下所示：

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

SVG图片没有正确显示，尤其是SVG标签内的图片，如下所示（其他SVG标签正确显示）：

<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"/>

浏览器支持这种情况吗？

感谢您的帮助

出于隐私原因，如果SVG文件在图像上下文中使用，即通过html <img>标记或作为背景CSS图像，则必须在单个文件中完成。

这意味着SVG文件中的任何图像都必须编码为数据URI。