Question

有人已经asked my question about detecting SVG support in browsers但是有三个主要的解决方案，而不是很多关于每个方案的优点的讨论。

那么：哪个最好？在便携性和正确性方面，即。假阴性（即“无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;

Answer 1

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

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

这非常简单地检查SVG Specification中定义的SVGRect对象的支持。 Chrome中typeof SVGRect为"function"，IE9中为"object"，但在不支持SVG（例如IE8）的浏览器中，返回"undefined"。

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

if (typeof SVGRect !== "undefined") { ... /* If the browser does support SVG. */ }
else { ... /* If the browser does not support SVG. */ }

Answer 2

目前，Modernizr使用方法B检测<img>标记中对SVG的支持，并使用方法C检测<embed>和<object>标记中对SVG的支持。似乎过去常常使用一种更像A的方法来检测“SVG as img”支持，但是这种方法有利于B（有关更多细节，请参阅CSS-tricks上的this post）。

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

Answer 3

我可能会使用modernizr。

哪种SVG支持检测方法最好？

3 个答案: