Question

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

Answer 1

除了＆lt; = IE8之外，所有主流浏览器都支持多年。解决方法可能是RaphaelJS。

来源：

Answer 2

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 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

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

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

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

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

Answer 6

¡使用object元素！

<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 7

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

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

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

Boilerplate HTML5默认情况下会为你提供no-svg类，并带有一些javascript魔法。（例如，对于IE8）

Answer 8

如果我使用<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）如果检测到没有.svg支持，则Modernizr为html元素提供.no-svg类。 3）jQuery交换文件扩展名。 .indexOf(".svg")检查字符串".svg"是否包含在src的值中，如果找不到，则返回-1，如果匹配，则返回正整数。如果找到".svg"，则整个src字符串会被提取到isSvg，而.replace()会将.svg交换为.png，并将结果保存为{ {1}}，然后将其设置为isPng的值。

Answer 9

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

caniuse.svg()

Answer 10

对于背景图片，这是为旧版浏览器回退到PNG背景的简单方法：

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

.SVG浏览器支持

10 个答案: