Atualmente, estou reformulando um site, basicamente apenas atualizando-o para uma aparência mais atualizada e tentando torná-lo o mais independente possível de resolução e, em nome da independência de resolução, achei que tentaria usar Imagens SVG no design em que o navegador suporta imagens SVG em<img> Tag. O motivo pelo qual eu quero continuar usando apenas SVG no<img> As tags, em vez de usar uma solução mais ambiciosa, são que o AFAIK Chrome, Opera e Safari o suportam, e o FF4 parece que finalmente o consegue combinar com o fato de todo o site ser construído em um CMS personalizado que precisaria ser parcialmente reescrito para começar a alterar o HTML de saída (atualmente ele suporta imagens de design customizadas, CSS customizado e JS customizado inclui para cada tema).

Agora, observei um pouco a rede tentando descobrir a melhor maneira de fazer isso e, por algum motivo, praticamente todas as soluções sugeridas que encontrei funcionaram mal (é possível detectar o FF3.x como suporte ao SVG no<img> tags para que eles não fossem exibidos corretamente lá, outro nunca tentou, vários eram muito complexos "substituem todas as imagens por SVG se houver suporte para ele" funções que também não funcionarão muito bem.

O que estou procurando é realmente um pequeno trecho que pode ser chamado assim (aliás, estou usando o JQuery com este novo tema para o site):

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

Alguém realmente tem uma solução funcional para isso que não produz resultados imprecisos? Nesse caso, eu ficaria muito grato.