SVG 在网站内和优雅的后备到 .png？

Question

人们目前如何在他们的页面中使用 SVG 进行编码？

我看过这个帖子，来自 Todd 一位出色的前端开发人员：

http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

我也看到了这个，来自另一位知名开发者 Chris：

http://css-tricks.com/using-svg/

人们已经使用了 HTML 元素“对象”，但是我希望看到一些已经比我有更多经验的人。将 SVG 与 png 一起使用的最佳实践是什么，假设你必须只支持 IE8 和以上，重点是针对较新的浏览器。

我的大部分 .svg 文件都使用 .png 文件，而大多数图形文件都使用 .ai 文件。

Answer 1

您问题中的 CSS Tricks 链接给出了答案。

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

或

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

Answer 2

我个人最喜欢的是clown car technique。本质上，您可以在内联 svg 中包含一个 png src，它只会将 svg 显示给 svg 浏览器，而将 png 显示给不支持的浏览器