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

Question

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

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

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

内嵌框架

 <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，但是使用什么，什么是最佳实践？

Answer 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