可靠地检测< img>标签支持SVG [英] Reliably detecting <img> tag support for SVG

问题描述

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

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

现在，我已经在网上看了一下，试图找出最好的方法来解决这个问题，并且由于某些原因，几乎每个建议的解决方案都是如此我发现效果不佳（一个检测到FF3.x在< img> 标签中支持SVG，因此它们没有在那里正确显示，另一个从未尝试过，有些过于复杂用SVG替换所有图像，如果有支持它的功能也不会很好。

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.

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

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.

推荐答案

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

This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.

这篇关于可靠地检测< img>标签支持SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！