Question

我知道这个问题上有很多文章，但我不知道今天最好的做法是什么？

我在我的页面上使用了很多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，但是使用什么，最佳做法是什么？

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

另一个插件 -solutions

svgeezy

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

1 个答案: