在网页中呈现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) 
     }) 
    } 
})