Ventajas de implementar imágenes SVG en nuestro sitio web

Los Gráficos Vectoriales Escalables (Scalable Vector Graphics) o SVG son, cómo dice su nombre, vectores escalables que no pierden calidad, ya sea agrandándolos o achicandolos. Para las nuevas tecnologías como retina display y sitios con diseños responsive, este tipo de imágenes pueden ser útiles ya que podremos redimensionarlas sin tener que preocuparnos por el pixelado.

UN POCO DE HISTORIA

El W3C (desarrollador de SVG) en el año 2001 recomendó la utilización de SVG en las webs. A partir de ahí los navegadores fueron incluyendo soporte para dicho formato. Mozilla lo incluyó desde su versión 1.5 mientras que en Internet Explorer recién estuvo disponible en la versión 9. También esta disponible desde la versión 8 de Opera, así como en Google Chrome y Safari.

¿Por qué usar SVG en nuestra web?

Como les decía en la introducción, en esta época en la que tecnologías como retina display, tablets y celulares están muy presentes en la web, debemos adecuar nuestro sitio a ellas. Eso implica crear un diseño dinámico que se “acomode” a la resolución de nuestro dispositivo y además que nuestras imágenes no pierdan calidad en el proceso. Los gráficos SVG son independientes de la resolución de la pantalla.

Implementando SVG en el sitio

Podremos mostrar las imágenes con el formato SVG de diferentes maneras usando etiquetas HTML <embed><object><img> o simplemente desde CSS.

OBJECT: QUIZÁS, LA FORMA MÁS CORRECTA

La mejor forma de mostrar un archivo SVG, es quizás con la etiqueta <object> ya que es soportado por la mayoría de los exploradores, además podemos agregar un mensaje para aquellos exploradores que no lo soporten.

Colocándolo de esta manera no tendremos problemas de compatibilidad con IE7.

CON LA ETIQUETA IMG

En los exploradores modernos podremos escribirla como si fuera una imagen común aunque este método no está soportado por Internet Explorer 7. Otra desventaja es que Internet Explorer 9 no admite redimensionar la imagen.

En este caso si añadimos una imagen de 480 pixeles por 480 pixeles, se vería el SVG del tamaño original, pero ocupando un espacio de 480px × 480px.

CON CSS PUEDO HACERLO TAMBIÉN

En CSS podemos implementarlo fácilmente colocandolo como fondo de un elemento HTML. La otra ventaja que presenta este método es que podemos añadir una imagen en formato soportado a modo de fallback.

Utilizando el asterisco trabajamos de manera específica con IE7 y atacamos el problema, mostrando una imagen para que el espacio no quede vacío.

Modificado por última vez el día 26 de diciembre de 2012 a las 07:23
Scroll to top