如何在沒有JavaScript的情況下基於支持嵌入SVG/PNG？

我試圖在網站上嵌入SVG圖像。我將使用Modernizr來檢測SVG兼容性。我已經看過SVGWeb和其他人，現在我不想真正使用它們。如何在沒有JavaScript的情況下基於支持嵌入SVG/PNG？

我想要做的是：如果瀏覽器支持SVG，請在HTML5頁面中嵌入一個SVG圖像。如果沒有，請使用<img>標籤放置PNG替代品。

我希望這個圖像是HTML的一部分，而不是通過CSS的background-image屬性添加它。我也想要圖片和它的元數據（alt img/desc svg）很容易被谷歌閱讀，因此，我不知道我是否應該通過JQuery來做到這一點。

有關最佳方式的任何建議嗎？

謝謝。

來源

2012-01-09 Housni

您是否考慮過使用SVG images in the <img> element？

如果你正在做這個服務器端，那麼有很多方法可以做到這一點，包括content negotiation這可能會或可能不會工作。

或者，你可以通過你所有的圖片src屬性用於壓縮和像這樣的東西重寫他們：

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"; 
    } 
}

來源

2012-01-10 23:24:49 adiabatic

我讀了一大堆文章，其中大多數人都說img標籤中的svg不支持......但那些文章一定是過時的。我想我現在開始使用img標籤。關於內容談判，我不知道這是多麼可靠... ...必須研究一個更大的。 – Housni 2012-01-11 14:39:46

如果這有幫助，你有沒有[考慮接受它作爲答案]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）？ – adiabatic 2012-01-12 04:43:36

我用兩個答案的組合，實際上是：。如果（Modernizr.svg）{ $（ 'img.svg'）ATTR（ 'src' 中，函數（）{ 收益$（本）.attr （'src'）。replace（'。png'，'.svg'）; }）; } 縮進了4位顯示格式的代碼似乎並沒有爲我工作：/ – Housni 2012-01-12 11:34:44

如果你不想在客戶端使用JavaScript，那麼你最終必然會在服務器端執行它。我可以想象的是，您可以檢查訪問者使用的瀏覽器（&版本）的UserAgent，並相應地顯示SVG或PNG。也許這是一個選擇？

編輯：好吧，看起來你還在考慮JavaScript。就我個人而言，我會選擇始終將img-tag指向一個PNG。然後，當文檔準備就緒後，我會通過所有這些img標籤，並用指向SVG的嵌入標籤替換它們。

jQuery的例子：使用

if(Modernizr.svg) // Wohooo SVG words: let's party 
{ 
    $('img.replace').each(function() { // Loop through all PNGs that need replacing 
    // A unique identifier for images is saved in the id-attribute: use it to append the SVG version 
    $(this).append('<embed src="' + $(this).attr('id') + '.svg" type="image/svg+xml" />'); 
    $(this).remove(); // Clean-up the unused img-tag 
    }); 
}

上面的例子中，像

<img class="replace" id="123456" src="123456.png"/>

一個img標籤將與

<embed src="123456.svg" type="image/svg+xml" />

或許這對你的作品被取代？ ;-)

來源

2012-01-09 20:47:26

如果我做到了服務器端，這將意味着，我必須維護的代碼和通過增加瀏覽器支持來更新它，而像Modernizr這樣的庫將得到維護。現在，我能想到的唯一辦法就是這樣： – Housni 2012-01-09 21:21:43

對不起，有人可以編輯上面的代碼嗎？我只能進行5次編輯。我似乎無法得到我的代碼格式如下：/ – Housni 2012-01-09 21:28:02

好吧，檢查我的編輯，如果這就是你要找的;-) ... – 2012-01-10 14:38:36

如何在沒有JavaScript的情況下基於支持嵌入SVG/PNG？

回答

相關問題