19

有人已经问过我关于在浏览器中检测 SVG 支持的问题，但是有三个领先的解决方案，并且没有太多关于每个解决方案的优点的讨论。

那么：如果有的话，哪个最好？就可移植性和正确性而言，就是这样。假阴性（即“无 svg”）是不可取的，但可以接受；误报不是。

展品 A：

var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';

var img = document.createElement('img')

img.setAttribute('src',testImg);

return img.complete;

展品 B：

return document.implementation.hasFeature(
    "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");

展品 C：

return !! document.createElementNS &&
       !! document.createElementNS (
             'http://www.w3.org/2000/svg',
             "svg")
      .createSVGRect;
4

3 回答 3

39

无需为此包含整个 Modernizr 库。这是我过去使用过的简单检查：

typeof SVGRect !== "undefined"; // true if supported, false if not

这很简单地检查了对SVG 规范SVGRect中定义的对象的支持。在 Chrome 中是 is ，在 IE9 中是，但在不支持 SVG 的浏览器（例如 IE8）中返回。typeof SVGRect"function""object""undefined"

使用上面的代码，您可以简单地：

if (typeof SVGRect !== "undefined") { ... /* If the browser does support SVG. */ }
else { ... /* If the browser does not support SVG. */ }
于 2015-01-30T15:37:06.213 回答
2

目前，Modernizr 使用方法 B 检测<img>标签中对 SVG 的支持，并使用方法 C 检测标签<embed>和<object>标签中对 SVG 的支持。似乎它曾经使用一种更像 A 的方法来检测“SVG as img”支持，但为了支持 B 而放弃了这种方法（有关更多详细信息，请参阅这篇关于 CSS-tricks 的帖子）。

因此，目前看来，B 或 C 将是最好的方法，具体取决于您想要测试的内容。

于 2014-11-05T09:44:07.953 回答
1

我可能会使用modernizr。

于 2012-03-13T17:50:45.877 回答