12

我目前正在对网站进行一些重新设计，基本上只是将其升级到更新的外观并尝试使其尽可能独立于分辨率，并且以分辨率独立的名义我想我会尝试使用浏览器在<img>标签中支持 SVG 图像的设计中的 SVG 图像。我想坚持只在<img>标签中使用 SVG 而不是使用一些更雄心勃勃的解决方案的原因是 AFAIK 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 */
}

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

4

5 回答 5

4

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

于 2011-05-15T13:16:44.440 回答
3

对于旧浏览器，您可以使用<object>or<iframe>标记，但这不是一个好的解决方案。Firefox和IE9（其他浏览器不知道）现在已经实现了inline 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 作为图像源。

于 2010-11-07T15:20:06.793 回答
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")
于 2013-02-25T19:04:26.173 回答
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/

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

于 2010-11-07T15:25:43.290 回答
-3

使用<object>-Tags 显示 SVG。见http://caniuse.com/svg-img和http://www.w3schools.com/svg/svg_inhtml.asp

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

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

于 2010-11-07T15:04:22.573 回答