SVG向下兼容的降级技术

前端 2019-07-13T14:32:03 浏览:6081

SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像。SVG的优势就是 清晰/清晰/清晰,现代浏览器对SVG的支持几乎100%,但是总要考虑少数人的感受,有的人偏偏喜欢用ie8,没办法,这里只能做优雅的降级。直奔主题方法如下:

1.方法一

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

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

3.方法二

使用多背景图技术。因为各浏览器对SVG和对多背景图技术的支持情况很相似,如果支持多背景图,也会支持SVG,所以,我们的CSS声明可以这样写。

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

4.方法三

运用 Modernizr,Modernizr在检测到不支持SVG时,在HTML上加了”.no-svg”CSS类。

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

时代的进步,总是会留有遗憾,我们能做的就是将遗憾降到最低。