El formato de imágenes svg,  acrónimo de gráficos vectoriales escalables (Del inglés Scalable Vector Graphics) no se trata de ninguna novedad ni muchísimo menos. De hecho Wikipedia marca su creación e implementación entre los años 1999 y 2001. Así pues, ¿Por qué lo vemos aparecer en las listas de tendencias de diseño web precisamente ahora?

busquedas de imágenes svg

(ejemplo de el aumento en la búsqueda de la palabra “svg” en los últimos años)

Una de las posibles respuestas se debe a un cambio de paradigma que los ingenieros de 1999 no pudieron siquiera imaginar: la aparición y supremacía de los dispositivos smartphone  y la creación del diseño web responsive.

Se calcula que a día de hoy entre el sesenta y el setenta por ciento del tráfico online ocurre desde dispositivos móviles, una tendencia que solo parece ir en aumento. Adicionalmente, con los próximos cambios anunciados por Google para modificar la indexación del contenido online para ser “mobile first” y dar prioridad al tráfico móvil, debemos concentrarnos tanto en que las imágenes de nuestro sitio web se visualicen correctamente en la mayor cantidad de tamaños de pantalla y dispositivos posibles como en minimizar la carga que dichos elementos ejercen en el navegador para no afectar negativamente a la experiencia que nuestros usuarios tengan al moverse por nuestro contenido. Por ello, tiene tanta importancia la optimización de imágenes de cara al SEO de tu web.

A la hora de incorporar imágenes a nuestro sitio web, siempre hemos tenido multitud de opciones, siendo .jpeg, .gif  y .png las más utilizadas tradicionalmente. El formato .gif tiene la peculiaridad de reproducir contenido animado, mientras que .jpeg y .png son formatos de imagen que permiten una gran adaptabilidad y calidad, con el añadido que el .png incluye un canal alfa para poder realizar interesantes juegos de transparencias. Esto permite una enorme flexibilidad creativa a la hora de afrontar un proyecto de diseño web.

¿Qué pueden hacer entonces las imágenes svg que no puedan estos otros formatos tradicionales?

La clave reside en la esencia misma de como son almacenadas las imágenes: mientras que en los formatos .jpeg, .gif  y .png la imagen está compuesta de un número limitado de píxeles, dependiente de la resolución de la imagen durante su creación (o “rasterización”), los archivos .svg están formados por elementos geométricos vectoriales, curvas calculadas al vuelo matemáticamente. Esto significa que las imágenes .svg pueden ser escalables en ambas direcciones sin perder un ápice de calidad, ya que se “terminan de crear” en el momento que las necesitamos. Por lo que lograrás reducir el peso de la imagen sin que pierda calidad y además reducir el tiempo de carga de tu página web.

Por supuesto el sistema exacto de funcionamiento en la creación de una imagen vectorial excede en mucho el rango de conocimientos técnicos que buscamos en nuestro blog, así que esto se trata de una super simplificación del proceso. En cualquier caso, como se suele decir, una imagen vale más que mil palabras:

diferencia entre raster y vector

(Paradógicamente, este ejemplo, no está en .svg, así que se puede ver pixelada en algunos formatos)

Como puede apreciarse, las imágenes rasterizadas  pierden calidad al modificar su tamaño original, mientras que una imagen .svg jamás verá comprometida su calidad y legibilidad, viéndose perfectamente independientemente del dispositivo utilizado por el usuario. Para conseguir el mismo efecto con formatos tradicionales deberíamos (como ocurre con las fotografías) cargar en nuestra web diferentes versiones a diferentes tamaños de la misma imagen, e ir cambiando de unas a otras mediante “media query” o los saltos de formato que especifiquemos en el código CSS.

Cabe recalcar que como acabamos de comentar en el párrafo anterior, el formato .svg no es omnipotente. A día de hoy no existe una forma rentable en tiempo o dinero de convertir fotografías e imágenes reales a vectores, lo que nos obliga a depender de los formatos tradicionales para este tipo de contenido, aún a expensas de tener que cargar varias veces la misma imagen; simplemente no hay otra forma.
Ahora bien, para todo lo demás, ya sean logotipos, botones, elementos gráficos abstractos, ilustraciones e incluso ciertos textos, el formato de imágenes svg nos ofrece infinitas ventajas que debemos aprovechar, no solo ya para nuestro diseño web, sino para la imagen de marca de nuestro producto o negocio. ¿Por qué no diseñar directamente nuestro logo y los elementos gráficos principales de nuestra marca, en formato vectorial? La capacidad de reescalabilidad del .svg no se limita únicamente a las páginas web, también permite ampliar y reducir a casi cualquier tamaño que necesitáramos, desde la impresión de tarjetas de visita hasta plotter de gran formato. Lo que ocurre ahora es que simplemente el diseño web ha descubierto que también puede beneficiarse de esta asombrosa capacidad.

formatos imágenes svg

(Otro ejemplo de cómo afecta el reescalado a una imagen, en este caso, más compleja)

Por tanto, el formato de imágenes .svg no es ningún descubrimiento milagroso ni última tecnología de vanguardia, sino una versátil herramienta de diseño, redescubierta una década después de su creación, en el centro de una revolución para la que siempre estuvo preparada.