SVG el formato que todos hablan. Definición, uso y compatibilidad

¡Hola! Me presento, soy Juan Carlos, front-end developer en Drool Studio.

Entre mis tareas dentro de Drool, está la de adaptar y procesar los diseños para trasladarlos a la web. Nuestros diseños web constan de mogollón de elementos y algunos de ellos son gráficos vectoriales. Una vez tenemos definida toda la interactividad de la página web y de todos estos elementos llega el momento de prepararlos de la mejor forma. Dependiendo de su interactividad y de cómo está diseñado el universo de la marca se decide la forma de exportarlo, y uno de mis formatos favoritos es el formato SVG.

En este artículo voy a explicar qué es el SVG, su uso, ventajas de sus aplicaciones (a nivel técnico y de experiencia de marca) y la compatibilidad entre navegadores de este formato, seguro que después de leer mi post también se convertirá en tu formato preferido.

SVG es la abreviatura de Scalable Vector Graphics, es decir, un formato de imagen de gráficos vectoriales. Además este formato de archivo está basado en el lenguaje XML.

Gracias a la versión de HTML5 y a la incorporación del formato SVG como un estándar, ha obligado a los navegadores a implementar el soporte de manera nativa, incluyendo Internet Explorer, que también soporta SVG a partir de su versión 9, mejorando vertiginosamente la capacidad para admitir y manejar archivos en este formato.

Como he comentado anteriormente, el formato SVG está basado en XML, de modo que es un lenguaje abierto y extensible. Una de las ventajas de estar escrito en este lenguaje es que su fuente es completamente editable, podemos abrirlo en cualquier editor de texto y crear imágenes en código, a diferencia de una imagen en mapa de bits que están codificadas y no son editables directamente.

Y después de esta definición tan técnica vamos a ver lo que realmente nos interesa de este pedazo de formato.

Razones para usar SVG en nuestros diseños web.

Generalmente el formato SVG se ha utilizado para los pequeños iconos acompañado de un botón, pero son muchos los elementos gráficos que pueden beneficiarse de sus ventajas, como por ejemplo la iconografía de tu proyecto y la utilización de SVG para el logotipo de tu marca. Con estas aplicaciones conseguiremos darle vida a los elementos gráficos de nuestra web, obtener una web más impactante sobre el usuario, conseguir mantener nuestro recuerdo de marca en su memoria y sobre todo destacar sobre nuestra competencia consiguiendo una imagen más moderna y profesional.

También destaco que hay un gran número de otras posibilidades para este formato como filtros, patrones, degradados, animaciones y otros elementos interactivos cuyo uso dependerá del estilo gráfico de la marca en cuestión como hemos comentado unas líneas más arriba.

Los archivos SVG nos permiten una visualización perfecta en cualquier dispositivo independientemente de la resolución pantalla que tenga.»

Los dos tipos de imagen más utilizados a día de hoy son: vectoriales y mapas de bits. Lo formatos de imagen vectorial están basados en líneas, curvas y formas geométricas descritas matemáticamente mediante coordenadas y los formatos de imagen en mapa de bits se componen de una cuadrícula compuesta de píxeles.

SVG nos permite usar 3 tipos de objetos gráficos: formas en vector (desde líneas, rectángulos, círculos hasta polígonos más complejos…), imágenes y textos. Las ventajas que nos ofrece un archivo SVG respecto a otros formatos de imagen en mapa de bits son muy elevadas:

• Calidad y nitidez de imagen
• Reducción de peso
• Animaciones con SVG

Ahora vamos a comentar los detalles de cada una de ellas.

Calidad y nitidez de imagen.

En muchos sitios webs, sobre todo cuando navegas a través de un dispositivo móvil muchas imágenes no se ven bien definidas o están pixeladas, esto se debe a que las imágenes carecen de la calidad necesaria para las pantallas de alta resolución, también conocidas como retina.

Unas de las cosas que repercutir en una imagen de una marca es que las imágenes que contienen su sitio web se vean pixeladas o de manera incorrecta. Esto crea un efecto negativo en los usuarios de nuestra web puesto que da una imagen poco profesional y descuidada de nuestra marca. Una de las características principales del formato SVG a diferencia de las imágenes de mapa de bits, es que los gráficos vectoriales se pueden escalar sin perder calidad. Vamos a poder visualizar correctamente nuestra imagen SVG en cualquier dispositivo (móvil, tablet, escritorio) independientemente de la resolución pantalla que tenga por lo que obtenemos siempre una correcta visualización de nuestras imágenes.

Como vemos en la imagen de mapa de bits (JPG, PNG, GIF) perdemos nitidez, mientras que en la imagen SVG se verá perfecta. Podemos escalar todo lo que queramos, que nuestro formato SVG no va a perder ni una pizca de calidad.

Reducción de peso.

Aunque las conexiones a internet son cada vez mas rápidas, los usuarios son también mas exigentes y necesitamos optimizar la entrega de nuestras páginas para que carguen rápido, sobre todo en dispositivos móviles donde generalmente la velocidad de conexión es más limitada.

El peso y la optimización de la calidad de imágenes es uno de los mayores procesos que hay que tener en cuenta a la hora de desarrollar nuestro proyecto web. Siempre debemos tener un equilibrio perfecto entre diseño y desarrollo para garantizar la mejor experiencia de navegación posible.

Por lo general los archivos vectoriales son muy ligeros y utilizando este formato conseguiremos una calidad óptima sin incrementar el tamaño de los archivos descargados. Esto se traduce en una notable optimización del peso de nuestro proyecto. Lo que se refleja en una mejor experiencia del usuario al reducir el tiempo de carga de nuestra página web (otra nota positiva en la imagen de marca en el imaginario de nuestros usuarios). Esto nos generará a parte una gran repercusión (Google le da mucha importancia a la velocidad de carga) sobre el posicionamiento en buscadores (SEO) y será uno de los factores que determinará en qué lugar de la lista de resultados de búsqueda aparecerá nuestra web.

El formato SVG nos proporciona una calidad óptima sin incrementar el tamaño de los archivos.»

Animaciones con el formato SVG.

Una de las grandes utilidades del formato SVG es la posibilidad de realizar animaciones. La capacidad de combinación de SVG con estilos CSS y las propiedades de animación, ya sea nativa o apoyada con JavaScript, hace que SVG sea una parte fundamental a la hora de añadir una genial experiencia de usuario y un plus de interactividad en nuestro proyecto web consiguiendo, en términos de branding, una diferenciación con nuestra competencia gracias a la experiencia de navegación llegando a conseguir un mayor impacto en los usuarios que nuestra competencia.

Existen varias formas de realizar animaciones en formato SVG dependiendo de las características que vayamos a requerir. Gracias a las librerías JavaScript podemos manipular y animar archivos SVG de una forma muy ágil y productiva. Dependiendo del tipo de animación que necesitemos desarrollar podemos decantarnos por elegir una u otra, o incluso llegar a combinarlas dependiendo en todo momento de la marca para la que nos encontremos trabajando y el estilo definido de la misma.

Podemos ver más ejemplos muy molones de animaciones con SVG, haz clic aquí.

Compatibilidad del formato SVG en los navegadores.

Ya no hay excusa para no trabajar con el formato SVG, prácticamente cualquier navegador moderno es compatible con el formato SVG, así que… ¡vamos a aprovecharlo! Pero… ¿Qué ocurre si necesito que mi proyecto requiera apoyo para un navegador que no soporta el formato SVG?. No pasa nada, siempre podemos hacer un fallback (soporte para navegadores demasiado antiguos) para cargar y mostrar una imagen en mapa de bits (PNG, JPG, por ejemplo) en lugar de SVG, mientras que los navegadores que lo soporten seguirán mostrando nuestro bonito archivo SVG. Todo solucionado.

Los navegadores modernos son totalmente compatibles con este formato.»

Si tu proyecto web todavía no cuenta con recursos en formato SVG, es hora de comenzar a utilizarlos. Conseguiremos tener imágenes en una calidad óptima en cualquier dispositivo sin incrementar demasiado el tamaño de los archivos descargados. Proporcionándonos una mayor velocidad de carga aportando una mejor experiencia al usuario que visite nuestra web consiguiendo así una mejor repercusión de marca y facilitando al usuario una grata experiencia de navegación. ¿Queda claro por qué es mi formato favorito?

Para finalizar el artículo os animo a ver nuestro último proyecto, en el que toda la iconografía e imágenes se han generado en formato SVG. Aprovechando todas sus ventajas y características para hacer que el resultado final sea muy molón.

Entonces… ¿te animas a usarlo?