Question

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

现在，我已经在网上看了一下我自己试图找出最好的方法，并且出于某种原因，我发现几乎所有建议的解决方案都运行得很差（一个检测FF3.x支持SVG在<img>标签中，所以它们没有在那里正确显示，另一个从未尝试过，有些过于复杂“如果支持它则用SVG替换所有图像”功能也不能很好地工作。

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

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

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

Answer 1

这似乎是最终答案：Javascript: How can I delay returning a value for img.complete。除非有人提出能够立即产生正确结果的东西。

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标签替换所有图像。我希望，但我必须谷歌，每个支持内联svg的浏览器都支持svg作为图像源。

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")

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

Answer 5

使用<object> - 用于显示SVG的标签。请参阅http://caniuse.com/svg-img和http://www.w3schools.com/svg/svg_inhtml.asp

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

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

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

5 个答案: