SVG在Safari中的img标签中不显示

简而言之，我在HTML中嵌入了一个SVG图形，该图形拒绝在Safari中显示（尽管它在Chrome，Firefox和其他浏览器中运行正常）。SVG在Safari中的img标签中不显示

我使用下面的标记来实现：

<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;

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

2014-10-07 element119

原来，<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>

2014-10-08 00:09:40

非常感谢！我不知道Safari与用于SVG的''标签有问题，因此没有太多的文档在线。 – element119 2014-10-08 00:29:51

@autibyte看看Meuwka的回答 – 2014-10-08 10:37:47

我想知道如果svg的PNG内容可能是Safari中问题的真正原因。 @meuwka http://jsbin.com/kayiwe/中的其他svg图像是否在Safari中运行？ – 2014-10-08 12:51:31

所有图像首先不是SVG
您可以在一个文本编辑器打开它，看看 - 这是PNG（非矢量）只保存为SVG

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

2014-10-08 00:42:44 meuwka

+1令人难以置信我没注意到:) – 2014-10-08 10:36:23

回答