可靠地检测支持SVG的<img>标签

Question

我正在重新设计一个网站，基本上只是将其升级到更具现代感的外观，并尽可能使其与分辨率无关。为了实现分辨率无关性，我想在设计中使用支持<img>标签中的SVG图像的浏览器中的SVG图像。我要坚持只使用<img>标签中的SVG而不是使用更野心勃勃的解决方案的原因是，据我所知，Chrome，Opera和Safari都支持它，而FF4似乎也会在其中加入，并且整个网站都建立在自定义CMS上，必须部分重写才能开始更改输出的HTML（目前它支持每个主题的自定义设计图像、自定义CSS和自定义JS包括）。

现在，我已经自己在网上找了一些方法，试图找出最佳的方式来实现这一点，但似乎每个建议的解决方案都效果不佳（其中一个检测到FF3.x支持<img>标签中的SVG，因此在那里无法正确显示，另一个从未尝试过，几个过于复杂的“如果有支持就用SVG替换所有图像”函数也不太好用）。

我真正想要的是一个可以像这样调用的小片段（顺便说一下，我在网站的这个新主题中使用了JQuery）：

if(SVGSupported()) {
    $('#header img#logo').attr('src','themes/newTheme/logo.svg');
    /* More specified image replacements for CSS and HTML here */
}

是否有人真正拥有一个可行的解决方案，并且不会给出错误的输出？如果是，我将非常感激。

- mludd

Answer 1

这似乎是最终答案：Javascript：我如何延迟返回img.complete的值。除非有人想出能立即产生正确结果的东西。

- Witiko

Answer 2

对于旧版浏览器，您可以使用<object>或<iframe>标签，但这不是一个好的解决方案。现在Firefox和IE9（不知道其他浏览器）已经实现了内联SVG，这很容易被检测到：

// From the Modernizr source
var inlineSVG = (function() {
  var div = document.createElement('div');
  div.innerHTML = '<svg/>';
  return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();

if( inlineSVG ){
  alert( 'inline SVG supported');
}

因此，您可以将所有图像替换为svg标签。我希望，但我必须在Google上搜索一下，支持内联SVG的每个浏览器都将支持SVG作为图像源。

- Harmen

---

我尝试了这个方法，但在Firefox、Safari 5.x和Opera中返回“false”，即使Safari和Opera都可以在<img>标签中显示SVG图像，所以我担心它似乎不起作用。 - mludd

Answer 3

这里有一篇关于各种方法的很好的讨论和比较： http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images 根据该页面，我最终采用了以下方法：

svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

- Julian

Answer 4

我一直想写一篇关于这个的博客文章，但是这里有一个应该可以工作的片段：

function SVGSupported() {
    var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
    var img = document.createElement('img')
    img.setAttribute('src',testImg);

    return img.complete; 
}

基于Alexis "Fyrd" Deveria在他的Opera博客上发布的脚本。

我在我的博客中使用类似的东西，您可以在此处查看其运行情况：http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/ 如果支持，它将使用<img>; 如果不支持，并且我们不在IE上，它将使用常规对象标记；否则，它将使用专门为svg-web创建的对象标记。 fakesmil用于渐变动画。它似乎在我测试过的所有地方都有效。执行此示例工作的脚本可以在此找到：http://blog.echo-flow.com/media/js/svgreplace.js

- jbeard4

---

这实际上是我在网上看到并尝试过的解决方案之一，但不幸的是，在Safari上似乎不起作用，但在Opera上可以正常工作。Safari会针对“资源”（瑞典语版本的Safari，因此不知道翻译有多奇怪）发出警告，称其被解释为图像，但作为image/svg+xml传输... - mludd