Javascript 在页面上使用SVG的最佳实践是什么？

我知道在这个问题上有很多文章，但我不知道今天使用的最佳实践是什么

我在页面上使用了很多svg，但问题是跨浏览器显示。我知道如何使用它们，但有人能告诉我什么是最好的，为什么

下面是可以使用的所有标签的示例，但是使用什么

IFRAME

 <iframe src="logo.svg" width="241" height="57" scrolling="no" frameBorder="0"></iframe>

---

我知道我可以用同样的方法使用Modernize，但是使用什么，最佳做法是什么？

您可以使用jquery检查与Modernizer的兼容性

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

另一种可能性是使用html

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

另一个插件-解决方案

---

您可以查看注意：通常情况下，SVG文件的文件大小大于压缩光栅化图像的文件大小。为了减少流量，您可能需要比较矢量图像文件是否值得费心：应该注意的是，由于SVG是ASCII/XML文件，它们通常可以使用GZIP进行压缩，比传统的图像文件要远得多。因此，即使它们在磁盘上稍大一点，它们在通过有线传输时实际使用的带宽也可能会更少。我知道，但正如我所说的，对于常见做法，什么是最佳用法？我认为最好的解决方案是同时使用svg和png/jpq格式的图像，然后，您可以使用该方法检查兼容性，这一点在中得到了回答：

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

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