如何强制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而不是回退？

谢谢！

为了测试目的，请尝试：'' –

另外，是否有浏览器支持图片元素，不支持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/，然后它应该可以正常工作（对于启用了脚本的用户）。