哪种 SVG 支持检测方法最好？ [关闭]答案

【问题标题】：Which SVG support detection method is best? [closed]哪种 SVG 支持检测方法最好？ [关闭]
【发布时间】：2012-03-30 03:58:09
【问题描述】：

有人已经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;

【问题讨论】：

你的“最佳”健身标准是什么？也许您应该修改您的问题和标题，以提出具体的、可回答的问题，例如 “在过去 3 年发布的任何浏览器中，这些都会失败（返回假阴性或阳性）吗？” 或类似的问题.否则，这个问题已经成熟，可以作为主观结束了。
展览B是deprecated。

标签： javascript svg browser-feature-detection

【解决方案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. */ }

【讨论】：

这是确定浏览器是否支持 img 标签中的 svg 的准确测试吗？ <img src="file.svg">?是否有浏览器通过img src 支持 svg 图像，但也不支持现代 API 以编程方式绘制它们？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我可能会使用modernizr。

【讨论】：

看起来和下面的C一样。
不是一个非常有用的答案，除非您愿意解释modernizr 使用哪种方法以及为什么它更好。特征检测不需要依赖库，库本身必须使用某种检测。