Actualmente estoy haciendo un rediseño de un sitio web, básicamente solo actualizándolo a un aspecto más actualizado y tratando de hacerlo lo más independiente posible de la resolución, y en nombre de la independencia de la resolución, pensé que intentaría usar Imágenes SVG en el diseño donde el navegador admite imágenes SVG en<img> Etiquetas La razón por la que quiero seguir usando SVG en<img> Las etiquetas, en lugar de utilizar una solución más ambiciosa, es que AFAIK Chrome, Opera y Safari lo admiten y FF4 parece que finalmente también puede combinarse con el hecho de que todo el sitio está construido en un CMS personalizado que debería ser parcialmente reescrito para comenzar a cambiar el HTML de salida (actualmente admite imágenes de diseño personalizado, CSS personalizado y JS personalizado incluido para cada tema).

Ahora, he mirado un poco alrededor de la red tratando de encontrar la mejor manera de hacerlo y, por alguna razón, casi todas las soluciones sugeridas que he encontrado han funcionado mal (uno detecta que FF3.x admite SVG en<img> etiquetas para que no se mostraran correctamente allí, otra nunca se intentó en absoluto, varias eran demasiado complejas "reemplazar todas las imágenes con SVG si hay soporte para ello" funciones que tampoco funcionarán demasiado bien.

Lo que estoy buscando es realmente un pequeño fragmento que se pueda llamar así (por cierto, estoy usando JQuery con este nuevo tema para el sitio web):

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

¿Alguien tiene realmente una solución de trabajo para esto que no dé resultados imprecisos? Si es así, estaría muy agradecido.