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

Question

关闭。这个问题是opinion-based .它目前不接受答案。












想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它.


7年前关闭。







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

这很简单地检查了对 SVGRect 的支持。 SVG Specification 中定义的对象.在 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. */ }