嵌入IMG src时未显示外部SVG

Question

我想使用img属性在src标记内显示外部保存的SVG：

<img src="https://combeespecs.blob.core.windows.net/configurations/55919877060821504/DefaultView.svg" style="width: 300px;">

由于某种原因，图像根本没有显示。如果我在object标记内嵌入相同的SVG，一切正常：

以下是live example中使用的完整代码：

<div>SVG in IMG tag:</div>
<img src="https://combeespecs.blob.core.windows.net/configurations/55919877060821504/DefaultView.svg" style="width: 200px;">

<div>SVG in object tag:</div>
<object data="https://combeespecs.blob.core.windows.net/configurations/55919877060821504/DefaultView.svg" type="image/svg+xml" style="width: 200px;"></object>

还有一件事：我想使用img标记而不是object，因为我想在HTML-Mail中显示SVG并且object标记似乎被大多数邮件客户端阻止。

Answer 1

在图像上下文中使用SVG时，必须在单个文件中完成。所以嵌入的png，因为它不在SVG文件的外部。

要解决此问题，您需要将png转换为data URI，以便它完全嵌入到svg文件中。