.SVG浏览器支持
我正在处理响应式devise，我正在考虑将导航图标创build为.svg文件。 目前的浏览器支持是什么样的，是否有旧的浏览器版本的解决方法/插件？
除<= IE8外，所有主stream浏览器都支持多年。 解决方法可能是例如RaphaelJS。
资料来源：
SVG规范非常广泛，目前没有浏览器支持整个规范。 这就是所有主stream浏览器的所有最新版本都有基本的 SVG支持 。 由于他们没有一个完整的支持，你需要检查你的目标浏览器中的个别function。 如果你只是绘制基本的形状，而不是使用更高级的function（如filter，animation等），你可能不会有任何问题。
完整的浏览器兼容性matrix可以在这里find 。
旧版IE的解决方法是使用VML 。 如果需要支持IE6并且您正在使用代码进行绘制，那么Raphael.js将会为您执行兼容性检查，并在适当的时候使用VML或SVG进行渲染。 但是，如果你正在加载一个原始的SVG文件，并将其用作图像源，将无法正常工作。
旧版浏览器的另一个select是使用canvg JavaScript库 。 这是一个纯粹的JavaScript SVGparsing器，将生成的图像渲染到canvas，但这可能是矫枉过正。
…或者你可以让Apache服务器处理它：
RewriteEngine On RewriteCond %{HTTP_USER_AGENT} MSIE\s[5-8]\. RewriteCond %{REQUEST_FILENAME} ^.+?\.svg$ RewriteRule ^(.+?)\.(?:svg)$ $1\.png [L] 你只需要创build每个.svg文件的.png版本，这个文件是用于CSS背景还是用于img标签并不重要。
- caniuse.com – SVG
编辑：我曾经链接到一个非常好的SVG比较表，但自2011年以来没有更新，所以它不再相关。
值得注意的是，如果您确实需要<= IE8的支持，您可以轻松地实现GoogleChromeFrame，以获得您正在寻找的SVG支持…
虽然你可能会发现，每个浏览器都有自己的小规模特点方面的怪癖。 我在使用filter的dynamic创build节点时遇到了问题，而且animateMotion在Google Chrome浏览器中的使用时间太长了…（由于这个原因我们使用FF5 +作为交互式界面，Safari也越来越好）
国际海事组织，除非整个应用程序是SVG，我只是使用PNGs为您的图标，除非你希望他们的规模很好！ 🙂
…但如果你只是想玩SVG，Giv'er！ ;）
用对象元素！
<object data="example.svg" type="image/svg+xml"> <!-- If browser don't soport / don't find SVG --> <img src="example.png" alt="Logotype" /> </object>
一般来说，您可以使用SVG来显示所有图像。 这样你就可以覆盖所有的iDevices视网膜的东西。 其他设备迟早会跟进。
对于不支持svg的浏览器，可以给主体一个“no-svg”类。
在你的CSS只需添加一个'.no-svg .yourimageclass'并放置一个PNG（覆盖它）
Boilerplate HTML5为您提供了no-svg类，默认情况下已经有一些javascript的魔术。 （例如IE8）
如果我正在使用<img>元素（而不是CSS背景图像），我使用了一个方便的解决方法，即Modernizr （一种JavaScript库，用于检测某些function（ 如浏览器上的.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）我创build.png版本的每个.svg文件。 2）Modernizr如果检测到没有.svg支持，则给html元素类.no-svg 。 3）jQuery交换文件扩展名。 .indexOf(".svg")检查string".svg"是否包含在src的值中，如果没有find，则返回-1如果是，则返回正整数。 如果find".svg" ，则将整个srcstring拖入isSvg ，而.replace() .svg isPng .png ，并将结果保存为isPng ，然后将其设置为src的值。
对于背景图片，以下是旧版浏览器回退到PNG背景的简单方法：
http://signaltower.co/2013/02/25/add-png-fallbacks-for-svg-files/
您可以使用caniuse.js脚本检测您的浏览器是否支持SVG：
caniuse.svg()
