在页面上使用 SVG 的最佳做法是什么？答案

【问题标题】：What is best practice to use SVG on page?在页面上使用 SVG 的最佳做法是什么？
【发布时间】：2014-03-26 16:01:33
【问题描述】：

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

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

这里是所有可以使用的标签的例子，但是用什么？？

IFRAME

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

HTML

<img src="logo.svg" alt="Company Logo" onError="this.onerror=null;this.src='logo.png';"/>

Javascript

var imgs = document.getElementsByTagName('img');
var endsWithDotSvg = /.*\.svg$/
var i=0;
var l = imgs.length;
for (; i != l; ++i) {
    if (imgs[i].src.match(endsWithDotSvg)) {
        imgs[i].src = imgs[i].src.slice(0, -3) + "png";
    }
}

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

【问题讨论】：

您可以查看RaphaelJS
注意：SVG 文件的文件大小通常大于压缩光栅化图像的文件大小。为了减少流量，您可能需要比较您的矢量图像文件是否值得麻烦。 :)
需要注意的是，由于 SVG 是 ASCII/XML 文件，它们通常可以使用 GZIP 进行比传统图像文件更远的压缩。因此，即使它们在磁盘上稍大一些，它们在通过网络传输时实际上可能会使用更少的带宽。

标签： javascript html image css svg

【解决方案1】：

您可以使用 jquery

检查与 Modernizr 的兼容性

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'">

另一个插件-解决方案

svgeezy

【讨论】：

我知道，但正如我所说，什么是常见做法的最佳用法？
我认为最好的解决方案是同时拥有 svg 和 png/jpq 格式的图像，然后您可以使用该方法检查最喜欢的兼容性
回答于：stackoverflow.com/questions/4476526/…