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

回答