頁面上使用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的最佳做法是什麼？

回答

相關問題