可靠地检测 SVG 标签支持

发布于 2024-09-30 16:07:14 字数 771 浏览 6 评论 0原文

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

现在，我自己环顾了一下网络，试图找出最好的方法来做到这一点，由于某种原因，我发现的几乎所有建议的解决方案都效果不佳（有人检测到 FF3.x 在 中支持 SVG > 标签，因此它们无法正常显示，另一个根本没有尝试过，有几个过于复杂的“如果支持的话用 SVG 替换所有图像”功能也不起作用好吧，

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

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

是否有人实际上有一个可行的解决方案？如果输出不准确，我将不胜感激。

原文

I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).

Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.

What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):

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

Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁〃客ぐ 2024-10-07 16:07:14

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

回复收藏 0 原文

强辩 2024-10-07 16:07:14

对于旧浏览器，您可以使用

// 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 作为图像源。

For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:

// 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');
}

So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.

回复收藏 0 原文

一绘本一梦想 2024-10-07 16:07:14

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

A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Based on that page, I wound up using this:

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

回复收藏 0 原文

疾风者 2024-10-07 16:07:14

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

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

I've been meaning to write a blog post about this, but here's a snippet that should work:

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

    return img.complete; 
}

Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.

I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js

回复收藏 0 原文

~没有更多了~