在Safari浏览器中，SVG无法在img标签中显示。

Question

7

简单来说，我在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文件本身，它看起来很好。图像元素具有正确的大小和盒模型，但没有显示任何内容。

- element119

2个回答

2

首先，您的图片不是SVG格式的。
您可以在文本编辑器中打开它并查看 - 它是PNG格式（非矢量图），仅保存为SVG格式。

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

- meuwka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

原来 <img src="image.svg"> 在Safari浏览器中无法工作，我尝试使用了 <object> ，它起作用了。你可以试一下：jsBin演示

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