Prueba de compatibilidad con SVG como img | Programar Plus

La compatibilidad del navegador con SVG no es tan simple como sí o no. Además de algunas peculiaridades sobre cómo se desarrolla ese soporte, depende de cómo se use ese SVG. Una forma común es directamente dentro de una etiqueta de imagen, como <img src="https://css-tricks.com/test-support-svg-img/image.svg" alt="description">.

¿Cómo se puede detectar si un navegador admite el uso de SVG de esa manera?

Una cosa es saber qué hacen los navegadores. Las únicas zonas de peligro real son IE 8- y Android 2.3. Podrías hacer una detección de agentes de usuario, y aunque no quisiera juzgar demasiado eso, generalmente es una mala idea.

Estaba viendo SVGeezy, un mini plugin de JavaScript específicamente para ayudar con los respaldos de SVG-as-img. Por supuesto, para que funcione, debe realizar una detección de características. En el código fuente, es un simple trazador de líneas:

supportsSvg: function() {
  return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
}

Nunca habia visto document.implementation.hasFeature nunca antes, así que pregunté un poco, ya que parecía demasiado bueno para ser verdad para algo de lo que nunca había oído hablar. La mayor parte de la documentación es bastante genérica y sugiere un excelente soporte para navegadores, lo que me hace aún más escéptico.

El trato es: es bastante inútil. Casi siempre vuelve true para todo. Excepto, aparentemente, en el caso de SVG-as-img, cuando es correcto. Como escéptico, me puse a crear una prueba para ver si esto era realmente cierto.

Lo primero que hice fue comprobar cómo lo detecta Modernizr, ya que la fuente de referencia para la función detecta. Nota importante aquí: La prueba SVG predeterminada de Modernizr (Modernizr.svg) no está probando el soporte SVG-as-img, está probando el soporte SVG como un <object> o <embed>. Solo tenga en cuenta eso cuando lo use como respaldo. Pruebe lo correcto (tienen pruebas para todas las formas en que puede usar SVG).

Tienen una prueba específicamente para SVG-as-img que fue así:

Modernizr.addAsyncTest(function () {
  var img = new Image();

  img.onerror = function () {
    addTest('svgasimg', false);
  };
  img.onload = function () {
    addTest('svgasimg', img.width == 1 && img.height == 1);
  };

  // 1px x 1px SVG; must be base64 or URI encoded for IE9... base64 is shorter
  img.src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==";
});

Esto crea un nuevo elemento de imagen, inyecta un URI de datos de una imagen SVG 1 × 1 y luego espera a que falle o se cargue correctamente.

Obviamente diferente al hasFeature prueba, así que creé un lápiz que mostraba los resultados de ambos métodos. Luego probé en todo tipo de navegadores diferentes. Una mezcla de los que se sabe que admiten SVG-as-img y los que no. En todos los casos, los resultados fueron idénticos. ¡Extraño, pero genial!

La prueba de Modernizr original es lo que ellos llaman una prueba “asíncrona”, lo que significa que se basa en funciones de devolución de llamada para dar una respuesta. Modernizr generalmente prefiere las pruebas “sincronizadas” en las que tan pronto como se define la prueba, tiene la respuesta correcta.

Entonces, después de hablar de ello con el equipo de Modernizr, ahora es la prueba predeterminada para SVG-as-img. Aún no está disponible en una versión, por lo que por ahora solo tendrías que ejecutarlo.

Modernizr.addTest('svgasimg', document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#Image', '1.1'));

Actualizaré esta publicación (y la versión que ejecutamos en CodePen) tan pronto como esté disponible.

Gracias a Patrick Kettner por supervisar la entrada a Modernizr, a Stu Cox por los comentarios y a aceptar el reemplazo de su método original, a Ben Howdle por conocer lo genial hasFeature() y usándolo en SVGeezy y Mike Taylor para verificando es utilidad.

Ah, y si detecta que el navegador no es compatible con SVG-as-img, querrá voltear el src para un formato de imagen compatible. Probablemente the-same-image.png ya sea automáticamente según una convención de nomenclatura o de forma selectiva según un atributo data- *.

Nota al margen sobre “http: //”

No se asuste por el “http: //” no seguro en la cadena de parámetros involucrada aquí. No se realiza ninguna solicitud HTTP y no dañará un sitio HTTPS. De hecho, si lo cambia, le hará daño. Jim Coffey escribe en:

Si, en cambio, especifica ‘https’, la mayoría de los navegadores lo harán, pero IE no pasará la prueba.

(Visited 10 times, 1 visits today)