.SVG浏览器支持

问题描述:

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

+0

https://www.w3schools.com/html/html5_svg.asp –

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

来源:

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

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

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

...但如果你只是想玩SVG,Giv'er! ;)

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

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

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

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

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

+0

PS,你可能想也看看图标字体(http://css-tricks.com/examples/IconFont/) – sym3tri

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

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

+0

该链接返回404 – SPRBRN

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

+2

值得注意的是,该表最后更新于2011年 – bashaus

+1

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

如果我与<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值。

+0

不错,但有没有一个原因,它不仅在'src' URI的末尾查找'.svg'? – iconoclast

+0

不仅仅是:你用那两个字烘烤我的面条! – landed

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

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

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

¡以对象元素!

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

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

caniuse.svg()