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

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

我在我的页面上使用了很多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"; 
    } 
}

我知道我可以使用现代化的S ame的方式，但使用什么，最佳实践是什么？

来源

2014-03-26 Schneider

您可以检出[RaphaelJS]（http://raphaeljs.com/） –

注意：通常情况下，SVG文件的文件大小大于压缩栅格化图像的文件大小。为了减少流量，你可能想要比较一下你的矢量图像文件是否值得遇到麻烦。 :) – Chiru

应该注意的是，由于SVG是ASCII/XML文件，它们通常可以比传统图像文件更加紧密地使用GZIP进行压缩。所以即使它们在磁盘上稍大一点，它们在通过线路传输时实际上可能使用较少的带宽。 – LocalPCGuy

，您可以检查与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

来源

2014-03-26 08:01:33 WhiteLine

我知道，但正如我所说的常见做法的最佳用法是什么？ – Schneider

我认为最好的解决方案是同时具有svg和png/jpq格式的图像，然后您可以使用该方法检查最喜欢的兼容性 – WhiteLine

HTML解决方案在IE8中不起作用:( – Schneider

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

回答

相关问题