html - 如何强制支持 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 加载 home-2x.png 而不是在我的视网膜 MacBook 上。为什么不加载 SVG？我怎么能强迫它的手？

谢谢！

score 1 · Accepted Answer

正如评论中指出的那样，<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/，然后它应该可以正常工作（对于启用脚本的用户）。

1 回答 1