Question

简单地说，我有一个嵌入HTML的SVG图形，拒绝在Safari中显示（尽管它在Chrome，Firefox和其他浏览器中都能正常工作）。

我使用以下标记来完成此任务：

<img alt="grapefruit logo" src="/assets/better-gf-logo_red.svg" />

以下是SVG未显示的页面的实时链接。左上角的水果徽标不会显示在Safari中：https://grapefruit.cs.rpi.edu/。

我已验证以下行也出现在我的nginx mime.types中：

 image/svg+xml                         svg svgz;

但是，我知道这个问题可能与mime类型无关，因为SVG在我的开发机器上也没有出现在Safari中（我测试了几个Web服务器）。我也试过在Safari中显示SVG file itself，看起来很好。图像元素具有正确的大小和框模型，但它不显示任何内容。

Answer 1

事实证明<img src="image.svg">在Safari中不起作用，我尝试使用<object>并且它有效。尝试一下： jsBin demo

<object
   type="image/svg+xml"
   height="70"
   width="150"
   data="/assets/better-gf-logo_red.svg">
</object>

Answer 2

首先你的形象不是SVG
你可以在文本编辑器中打开它，看看 - 它的PNG（不是矢量）只保存为SVG

... width="1640" height="422" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...