.SVG浏览器支持

Question

我正在开发响应式设计,我正在考虑将导航图标创建为.svg文件.什么是当前的浏览器支持,是否有旧浏览器版本的变通方法/插件？

Answer 1

除了<= IE8之外,所有主流浏览器都支持多年.解决方法可能是RaphaelJS.

资料来源:

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

Answer 2

SVG规范很广泛,目前没有浏览器支持整个规范.据说所有主流浏览器的所有最新版本都有基本的 SVG支持.由于他们都没有完全的支持,您需要检查您所定位的每个浏览器中的各个功能.如果您只绘制基本形状而不使用更高级的功能(如滤镜,动画等),则可能不会有任何问题.

可以在此处找到完整的浏览器兼容性矩阵.

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

旧浏览器的另一个选择是使用canvg JavaScript库.它是一个纯JavaScript的SVG解析器,它将生成的图像渲染到画布,但这可能有点过分.

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标记,则无关紧要.

Answer 4

• caniuse.com - SVG

编辑:我曾经链接到一个非常好的SVG比较表,但它自2011年以来没有更新,所以它不再相关.

Answer 5

值得注意的是,如果您确实需要<= IE8支持,您可以轻松实现GoogleChromeFrame以获得您正在寻找的SVG支持...

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

IMO,除非整个应用程序是SVG,否则我只会使用PNG作为您的图标,除非您希望它们能够很好地扩展!:)

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

Answer 6

¡对象元素!

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