.SVG浏览器支持

Question

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

Answer 1

所有主流浏览器有好几年，除了< = IE8的支持。解决方法可能是例如RaphaelJS。

来源：

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

Answer 2

值得注意的是，如果你确实需要< = IE8的支持，可以实现GoogleChromeFrame容易足以让你要找的SVG支持对于...

尽管您可能会发现每个浏览器都有自己的小怪癖， t到规范的功能。我在使用过滤器的动态创建节点时遇到了问题，并且animateMotion在谷歌浏览器中的使用时间太长...（因为这个原因，我们使用FF5 +作为交互式界面，Safari也越来越好）

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

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

Answer 3

你可以在所有图像中使用SVG。这样你就可以覆盖iDevices上的所有视网膜资料。其他设备迟早会跟进。

对于不支持SVG的浏览器，你可以给身体一类“无SVG”的。

在你的CSS只需添加一个”。没有-SVG .yourimageclass'并放置一个PNG来代替。（覆盖它）

样板HTML5为您提供了无SVG默认已经与一流一些JavaScript魔术。 （例如，用于IE8）

Answer 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解析器，它将生成的图像渲染到画布上，但这可能是矫枉过正的。

Answer 5

背景图像，这里的退却到PNG背景旧版本浏览器的简单方法：

http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/

Answer 6

• caniuse.com — SVG

编辑：我用来连接到一个非常不错的SVG比较表，但自2011年以来尚未更新，因此它不再相关。

Answer 7

如果我与<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）创建png格式的每.svg文件的版本。 2）Modernizr的给HTML元素的类的.no-svg如果它检测到有没有.SVG支持。 3）的jQuery交换的文件扩展名。 .indexOf(".svg")检查字符串".svg"包含的src值的范围内，返回-1如果如果这样做，并没有发现它和一个正整数。如果发现".svg"，整个src串被拉入isSvg和.replace()互换.svg为.png，并将结果保存为isPng，然后将其设定为src值。

Answer 8

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

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

你只需要创建.png格式每个.svg文件的版本，如果文件是CSS背景没关系或者用于img标签。

Answer 9

¡以对象元素！

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

Answer 10

您可以使用caniuse.js脚本来检测，如果你的浏览器支持SVG与否：

caniuse.svg()