Detección confiable <img> soporte de etiqueta para SVG

Question

Actualmente estoy rediseñando un sitio web, básicamente simplemente 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 independencia de la resolución Me imaginé que trataría de usar imágenes SVG en el diseño donde el navegador admite imágenes SVG en las etiquetas <img>. El motivo por el que quiero seguir usando SVG en las etiquetas <img> en lugar de utilizar una solución más ambiciosa es que AFAIK Chrome, Opera y Safari lo admiten y FF4 parece que finalmente puede combinarse con el hecho de que todo el sitio se basa en un CMS personalizado que tendría que ser reescrito parcialmente para comenzar a cambiar el HTML de salida (actualmente admite imágenes de diseño personalizado, CSS personalizado y JS personalizado incluye para cada tema).

Ahora, he buscado un poco 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 (una detecta que FF3.x admite SVG en las etiquetas <img>, por lo que no se muestran correctamente allí, otra nunca lo intentó en absoluto, varias eran demasiado complejas "reemplaza todas las imágenes con SVG si hay soporte para eso" funciones que tampoco funcionarán bien.

Lo que estoy buscando es realmente un pequeño fragmento que se puede 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 realmente tiene una solución de trabajo para esto que no da salida inexacta? Si es así, estaría muy agradecido.

Answer 1

Esta parece ser la última respuesta: Javascript: How can I delay returning a value for img.complete. A menos que a alguien se le ocurra algo que produzca los resultados correctos de inmediato.

Answer 2

Use <object> -títulos para mostrar SVG. Ver http://caniuse.com/svg-img y http://www.w3schools.com/svg/svg_inhtml.asp

Firefox 3.x también puede mostrar imágenes SVG, simplemente no SVG incrustadas. No estoy seguro acerca de aquellos en los otros navegadores tampoco. FF4 también permitirá SVG incrustados.

Con el <object> -Tag también puede incluir imágenes alternativas de PNG, en caso de que el navegador no admita la visualización de SVG.

Answer 3

Para los navegadores antiguos que podrían utilizar la etiqueta <object> o , pero eso no es una buena solución. Firefox y IE9 (no sé sobre otros navegadores) han puesto en práctica la integración de SVG ahora, que se puede detectar fácilmente:

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

Por lo tanto, puede reemplazar todas las imágenes por etiquetas SVG a continuación. Y espero, pero tengo que google en eso, que cada navegador que soporte svg en línea apoyará svg como fuente de imagen.

Answer 4

he tenido la intención de escribir un post sobre esto, pero aquí hay un fragmento que debería funcionar:

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

    return img.complete; 
} 

Basado en un guión de Alexis "Fyrd" Deveria, publicado en su blog Opera.

estoy usando algo similar en mi blog, que se puede ver en acción aquí: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/

Utilizará <img> si es compatible; si no, y no estamos en IE, usará una etiqueta de objeto regular; de lo contrario, usará una etiqueta de objeto especialmente creada para svg-web. fakesmil se usa para la animación de degradado. Parece que funciona en todos los lugares donde lo he probado.La secuencia de comandos que hace el trabajo para este ejemplo se puede encontrar aquí: http://blog.echo-flow.com/media/js/svgreplace.js

Answer 5

Una buena discusión/comparación de los métodos es aquí: http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images

Basado en esa página, terminé usando este:

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