在網頁中呈現SVG

Question

我有一個網頁，我需要在其中顯示SVG徽標。這在最新的瀏覽器中很容易實現，但我需要使它與舊版瀏覽器兼容。如果瀏覽器不支持SVG，我需要爲用戶顯示備用圖像。 我碰到過一種叫做HTTP-content negotiation的方法，但是我怎麼才能實現它來獲得想要的結果呢？ 我試過<object>標籤，但它似乎不適用於IE瀏覽器，並且在使用Firefox進行嘗試時很難進行設計。

Answer 1

我會在Modernizr的幫助下實現這個客戶端。給定一個標記，如...

<!-- Start with bitmaps because 
they will show up in all browsers even 
if javascript is not enabled --> 
<img src="logo1.png" class="logo" /> 
<img src="logo2.png" class="logo" /> 
<img src="logo3.png" class="logo" /> 
<img src="logo4.png" class="logo" /> 

你可以做...

$(document).ready(function(){ 
    if (Modernizr.svg){ 
     $('.logo').each(function(){ 
     var src = $(this).attr("src"); 
     var svg = src.substr(0, src.lastIndexOf('.')) + ".svg"; 
     $(this).attr("src", svg) 
     }) 
    } 
})