.SVG 浏览器支持答案

【问题标题】：.SVG Browser Support.SVG 浏览器支持
【发布时间】：2012-02-14 03:01:01
【问题描述】：

我正在进行响应式设计，并且正在考虑将导航图标创建为 .svg 文件。当前的浏览器支持是什么样的，是否有适用于旧浏览器版本的解决方法/插件？

【问题讨论】：

w3schools.com/html/html5_svg.asp

标签： cross-browser svg

【解决方案1】：

除了

来源：

【讨论】：

【解决方案2】：

值得注意的是，如果您确实需要

尽管您可能会发现每个浏览器在规范功能方面都有自己的小怪癖。我遇到了使用过滤器的动态创建节点的问题，并且 animateMotion 在 Google Chrome 中的问题已经太久了......（出于这个原因，我们使用 FF5+ 作为我们的交互界面，Safari 也在变得更好）

IMO，除非整个应用程序是 SVG，否则我只会为您的图标使用 PNG，除非您希望它们可以很好地缩放！ :)

...但如果你只是想玩 SVG，Giv'er！ ;)

【讨论】：

【解决方案3】：

您也可以将 SVG 用于所有图像。这样你就可以覆盖 iDevices 上的所有视网膜内容。其他设备迟早会跟进。

对于不支持 svg 的浏览器，你可以给 body 一个 'no-svg' 类。

在你的 CSS 中添加一个 '.no-svg .yourimageclass' 并放置一个 png。（覆盖它）

Boilerplate HTML5 已经默认为您提供了 no-svg 类，并带有一些 javascript 魔法。（例如对于 IE8）

【讨论】：

【解决方案4】：

The SVG spec 很广泛，目前没有浏览器支持整个规范。话虽这么说all the latest versions of all the major browsers have basic SVG support。由于它们都没有完整的支持，您需要检查您定位的每个浏览器中的各个功能。如果您只绘制基本形状而不使用更高级的功能（如过滤器、动画等），您可能不会遇到任何问题。

A full browser compatibility matrix can be found here.

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

旧浏览器的另一个选项是使用canvg JavaScript library。它是一个纯 JavaScript SVG 解析器，可以将生成的图像渲染到画布上，但这可能有点矫枉过正。

【讨论】：

PS，你可能也想看看 icon-fonts (css-tricks.com/examples/IconFont)

【解决方案5】：

caniuse.com — SVG

已编辑：我曾经链接到一个非常好的 SVG 比较表，但它自 2011 年以来一直没有更新，因此不再相关。

【讨论】：

不再是真的@bashaus。此表会定期更新。

【解决方案6】：

如果我正在使用 <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，然后将其设置为@的值987654336@.

【讨论】：

很好，但它不只在src URI 的末尾寻找“.svg”有什么原因吗？
不只是：你用那两个字烤我的面条！

【解决方案7】：

...或者你可以让apache服务器处理它：

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

您只需为每个 .svg 文件创建 .png 版本，文件是用于 css 背景还是用于 img 标签都没有关系。

【讨论】：

【解决方案8】：

¡使用对象元素！

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

【讨论】：

【解决方案9】：

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

caniuse.svg()

【讨论】：