转载 | SVG向下兼容优雅降级方法

本文引自：http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/

 

1.svg image标签降级技术

 

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>

 

如果浏览器支持SVG，则SVG显示；对于不支持的浏览器，例如IE8浏览器，会忽略svg标签的存在，直接渲染image，在其看来，这就是个img标签，于是，图像就以svg.png的形式显示了。

 

2.SVG作为background－image
Modernizr有一个SVG测试，可以判定设备是否支持SVG，于是，我们就可以通过在HTML元素上添加特定的类名(eg. no-svg)，做不同的样式控制

 

.my-element {
  background-image: url(image.svg);
}
.no-svg .my-element {
  background-image: url(image.png);
}

 

另一个方法

 

.my-element {
  background-image: url(fallback.png);
  background-image: url(image.svg), none;
}

 

其利用的技术是CSS3多背景，这是一个经验式技术，我们通过各种观察或者积累发现，浏览器只要支持了多背景，几乎无一例外支持SVG. 于是，浏览器认识url(image.svg), none这个多背景声明，就使用SVG，否则，降级使用上面的png背景。

 

3.SVG作为<img>

喜欢这么做：

 

<img src="image.svg" onerror="this.src=image.png">

 

HTML混杂行为，如果你是个具有分离癖好的人，上面的方法可能会让你揪心，你可以直接Modernizr的JS API，在脚本中判断处理，类似下面：

 

if (!Modernizr.svg) {
  $("img[src$='.svg']").attr("src", fallback);
}

 

如果上面代码中的fallback是个URL字符串，你可以把这个字符串放在data-fallback中，然后，你就可以根据你的实际需要，例如，根据后缀做智能判断加载等。