可靠地检测SVG的标签支持

我目前正在对网站进行一些重新设计，基本上只是将其升级到更新的外观，并尝试尽可能使其独立于分辨率，并且以分辨率独立的名义，我想我会尝试使用设计中的SVG图像，浏览器支持标签中的SVG图像。我之所以坚持只在标签中使用SVG而不是使用一些更加雄心勃勃的解决方案的原因是AFAIK Chrome，Opera和Safari都支持它，而FF4似乎最终可以得到它以及结合事实整个站点建立在自定义CMS上，必须部分重写才能开始更改输出HTML（目前它支持自定义设计图像，自定义CSS和每个主题的自定义JS包含）。

现在，我自己试着找出最好的方法来解决这个问题，并且由于某些原因，我发现几乎所有建议的解决方案都运行得很差（一个检测FF3.x作为支持SVG的标签所以它们没有在那里正确显示，另一个根本没有尝试过，有些过于复杂“如果支持它则用SVG替换所有图像”function也不能很好地工作。

我正在寻找的是一个可以这样调用的小片段（顺便说一下，我正在使用JQuery和这个新主题的网站）：

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

有没有人真的有一个工作解决方案，不会给出不准确的输出？如果是这样，我会非常感激。

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

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

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

那么，你可以用svg标签替换所有图像。我希望，但我必须谷歌，每个支持内联svg的浏览器都支持svg作为图像源。

这里有一个很好的讨论/比较方法： 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")

我一直想撰写关于此的博客文章，但这里有一个应该有效的片段：

 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/

如果支持，它将使用 ; 如果没有，我们不在IE上，它将使用常规对象标签; 否则，它将使用专为svg-web创建的对象标记。 fakesmil用于渐变动画。它似乎在我测试它的任何地方都有用。可以在此处找到为此示例工作的脚本： http ： //blog.echo-flow.com/media/js/svgreplace.js

使用 -Tags显示SVG。请参阅http://caniuse.com/svg-img和http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x也可以显示SVG图像，而不是嵌入式SVG。我也不确定其他浏览器上的那些。 FF4还将允许嵌入式SVG。

使用 -Tag，您还可以包含替代PNG显示图像，以防浏览器不支持显示SVG。