我如何强迫支持SVG的浏览器加载SVG而不是备份？

Question

<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装载到家里-2x.png而不是我的视网膜MacBook上。为什么它不加载SVG？我怎么能强迫它的手？

谢谢!

Answer 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/，然后它只会工作(对于启用脚本的用户)。