如何強制SVG支持的瀏覽器加載SVG而不是回退？

<picture> 
    <source type="image/svg+xml" srcset="icons/home.svg"> 
    <img src="home-1x.png" srcset="home-2x.png 2x" alt="Home"> 
</picture>

Safari 9完全能夠將SVG加載到我的視網膜MacBook上代替home-2x.png。爲什麼不加載SVG？我該如何強迫它的手？如何強制SVG支持的瀏覽器加載SVG而不是回退？

謝謝！

2016-02-16 Mike

爲了測試目的，請嘗試：'' –

另外，是否有瀏覽器支持圖片元素，不支持SVG？ –

根據http://caniuse.com/picture，Safari 9.1添加了圖片元素支持，因此還請檢查您使用的確切版本。 –

正如在評論中指出的，<img src="home-1x.png" srcset="icons/home.svg 1x" alt="Home">工程（SVG;一般而言）。

如果你想支持srcset預瀏覽器，你可以使用

<object type="image/svg+xml" data="icons/home.svg"> 
<img src="home-1x.png" alt="Home"> 
</object>

但是，這裏有一些問題，太：這兩個資源將被加載，object行爲更像是一個iframe不是像img（你可以在SVG中選擇文本，它可以執行腳本，導航等）。

另一個典型使用onerror這樣的：

<img src="icons/home.svg" onerror="this.onerror=null; this.src='home-1x.png';" alt="Home">

這具有這樣的缺點，即非SVG瀏覽器將不必要地加載SVG，並且用戶無需腳本和沒有SVG支持將不加載的任何圖像。我想這不是什麼問題。

最後，您可以使用picture標記並將其拉入http://scottjehl.github.io/picturefill/，然後它應該可以正常工作（對於啓用了腳本的用戶）。

2016-02-18 09:01:44 zcorpan

回答