如何强制支持 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；不是一般情况）。

如果要支持pre-srcset浏览器，可以使用

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

但这也有一些问题：两种资源都将被加载，object 更像 iframe 而不是 img（你可以 select 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/ 然后它应该就可以正常工作了（对于启用了脚本的用户）。

How do I force SVG-supporting browsers to load the SVG instead of fallbacks?