SVG (Scalable Vector Graphics) no es un concepto nuevo, este formato fue creado en el año 2001, pero recién está tomando importancia en el último tiempo, acompañando las nuevas tecnologías, las tendencias en Diseño Web y la necesidad de que todas nuestras imágenes se vean en HD.

Las imágenes con tamaños fijos, como son los archivos JPG, GIF o PNG son muy importantes cuando desarrollamos un Sitio Web, pero el problema que se nos presenta en la actualidad, es que al ser imágenes estáticas por naturaleza tienden a perder calidad (pixelarse) en las pantallas más grandes.

Otro problema que presentan estas imágenes se da cuando desarrollamos sitios responsives, que se tienen que adaptar a tamaños más pequeños de pantalla como son los smartphones o las tabletas. Al trabajar en este tipo de sitios, tenemos que lidiar con imágenes que no son sensibles y debemos crear varias versiones diferentes de la misma imagen para que se vea correctamente en cualquier dispositivo que utilicen los visitantes.

Para entender la diferencia entre los distintos formatos, vea el nivel de pixelación de las dos imágenes que se muestran a continuación.

Qué es SVG y por qué debería considerar su uso
Los Archivos SVG, son elementos muy simples, en teoría. Son sólo archivos de texto con un montón de XML dentro. Cada bit de información visual en un archivo SVG se define por código legible, que se calcula y transmite al navegador, software de gráficos, etc.

Esto significa que aunque los archivos SVG no son tan complejos como, por ejemplo, una fotografía formateada como un archivo JPG, son infinitamente más flexibles. Puede inclusive cambiarlos manualmente en un editor de texto. También pueden ser modificados con JavaScript y CSS. Algo también muy importante es que estas imágenes se pueden comprimir a un tamaño muy pequeño, optimizando el peso de nuestro Sitio Web.

Cuáles son las ventajas y desventajas de utilizar SVG

Ventajas

1- No pierde la calidad de la imagen en ningún caso, independientemente del tipo de dispositivo y tamaño de pantalla que se utilice.

2- Menor peso de la imagen, mejorando la performance del sitio web.

3- Se puede interactuar con estas imágenes a con JavaScript y CSS, logrando animaciones similares a lo que se puede hacer con Flash.

4- Es ideal para ser impreso.

5- Mejora el posicionamiento al poder indexar su contenido.

Desventajas

La principal desventaja al utilizar este tipo de imágenes es la incompatibilidad con algunos navegadores obsoletos, aunque cada vez es menor la cantidad de usuarios que los utilizan, en estos casos se pueden utilizar un PNG generado automáticamente tal cómo se hace ahora.

Conclusión
En la actualidad se tiende a desarrollar Sitios Web Responsives para que se puedan visualizar en cualquier dispositivo, o por lo menos así debería ser.

La tecnología de Internet en la actualidad ha avanzado mucho desde las antiguas páginas estáticas. Es hora de que nuestras imágenes también estén a la altura de las circunstancias. Si desea un Sitio Web de calidad, pero también simple, es hora de empezar a considerar el uso de imágenes SVG. No es solamente la ventaja de escalar las imágenes sin que se pixelen, también sirve para mejorar el posicionamiento, ahorran espacio y reducen el tiempo de carga.