如何强制支持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>

完全支持SVG的Safari 9可以在我的视网膜MacBook上加载home-2x.png。为什么不加载SVG？我怎么能用力呢？

谢谢！

Answer 1

正如评论中所指出的，<img src="home-1x.png" srcset="icons/home.svg 1x" alt="Home">有效（对于SVG;不是一般的）。

如果您想支持pre-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/然后它应该正常工作（对于启用了脚本的用户）。