SVG浏览器支持

Question

我正在研究响应式设计，并考虑将导航图标创建为.svg文件。当前浏览器的支持情况如何，是否有适用于旧版浏览器的解决方法/插件？

- Jedda

---

https://www.w3schools.com/html/html5_svg.asp - Tiago Duarte

Answer 1

除了IE8及以下版本外，所有主要的浏览器多年来一直有支持，可以使用RaphaelJS等技术进行解决。

来源:

• http://caniuse.com/#search=svg
• https://github.com/DmitryBaranovskiy/raphael

- bennedich

Answer 2

SVG规范非常广泛，目前没有浏览器支持全部规范。尽管如此，所有主要浏览器的最新版本都具有基本的SVG支持。由于它们都没有完全支持，您需要在针对每个浏览器时检查各个功能。如果您只绘制基本形状而不使用更高级的功能（如过滤器、动画等），那么您可能不会遇到任何问题。 可以在此处找到完整的浏览器兼容性矩阵。

旧版IE的解决方法是使用VML。如果需要支持IE6并且您正在使用代码进行绘图，则Raphael.js将为您执行此兼容性检查，并在适当时使用VML或SVG进行呈现。但是，如果您加载原始SVG文件并将其用作图像源，则无法使用此方法。

对于旧版浏览器的另一个选择是使用canvg JavaScript库。它是一个纯JavaScript SVG解析器，可以将结果渲染到画布上，但这可能有些过度。

- sym3tri

---

PS，您可能也想了解一下图标字体（http://css-tricks.com/examples/IconFont/）的相关内容。 - sym3tri

Answer 3

...或者您可以让Apache服务器处理它：

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\.
RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$
RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L]

你只需要为每个.svg文件创建.png版本，无论该文件是用于CSS背景还是img标记都没有关系。

- Louis

Answer 4

• caniuse.com — SVG

编辑：我曾经链接到一张非常好的SVG比较表，但它自2011年以来就没有更新过了，所以现在已经不再相关了。

- Kornel

---

不再是真的@bashaus。此表格定期更新。 - Simon East

Answer 5

值得注意的是，如果你需要支持<=IE8，你可以轻松地实现GoogleChromeFrame来获得你想要的SVG支持...

虽然你可能会发现每个浏览器都有自己的小毛病，与规范的特性有关。我曾经遇到过使用滤镜和animateMotion的动态创建节点问题，在Google Chrome中一直存在Bug...(出于这个原因，我们使用FF5+作为交互界面，Safari也变得越来越好)

在我看来，除非整个应用程序都是SVG，否则我会只使用PNG作为你的图标，除非你希望它们可以很好地缩放! :)

...但是如果你只想玩SVG，那就尽情享受吧! ;)

- raddrick

Answer 6

使用 object 元素！

<object data="example.svg" type="image/svg+xml">
     <!-- If browser don't soport / don't find SVG  -->
     <img src="example.png" alt="Logotype" />
</object>

- D.Bulten

Answer 7

您可以使用SVG来处理所有图像，这样您就可以在iDevices上涵盖所有视网膜屏幕。其他设备迟早会跟进。

对于不支持SVG的浏览器，您可以给body添加一个“no-svg”的类。

在您的CSS中，只需添加一个“.no-svg .yourimageclass”，然后放置一个png。(覆盖它)

Boilerplate HTML5已经默认提供了这个no-svg类，带有一些JavaScript魔法。(例如IE8)

- RedRoosterMobile

Answer 8

如果我正在处理<img>元素（而不是CSS背景图片），我会使用一个方便的解决方法，结合Modernizr（一种JavaScript库，检测浏览器是否支持某些功能，例如.svg支持）和几行jQuery代码：

$(".no-svg img").each(function() {
    var $this = $(this);
    if ($this.attr("src").indexOf(".svg") > -1) {
        var isSvg = $this.attr("src").toString();
        var isPng = isSvg.replace(".svg", ".png");
        $this.attr("src", isPng);
    }
});

1）我会为每个.svg文件创建.png版本。 2）如果Modernizr检测到没有.svg支持，它会给html元素赋予类.no-svg。 3）jQuery会交换文件扩展名。 .indexOf(".svg")检查字符串".svg"是否包含在src的值中，如果找不到则返回-1，如果找到，则返回正整数。如果发现".svg"，则将整个src字符串提取到isSvg中，并使用.replace()将.svg替换为.png并将结果保存为isPng，然后将其设置为src的值。

- Danny

---

不错，但是它为什么不只在src URI的末尾查找“.svg”呢？ - iconoclast

你用那两个词把我搞糊涂了！ - landed

Answer 9

您可以使用caniuse.js脚本来检测您的浏览器是否支持SVG：

caniuse.svg()

- Beka Tomashvili