Diseño de imágenes en SVG ¡Utilízalo!

No hay nada mejor que la jerga de los profesionales de diseño gráfico para que nadie les entienda: que si .jpg que si .png que si .webp, que si .tif; ellos se aclaran y seguro que tú también sabes de lo que estamos hablando, y, por eso, vamos a añadir otro formato más, a parte de los que ya os hemos mencionado.
Para todos aquellos que estáis diseñando web, optimizando imágenes o creando contenido para vuestro blog os interesa conocer otro término más SVG.

Si queréis podemos jugar a saber qué significan esas siglas y así a bote pronto se nos ocurre:

• Socorro Veo Gamberros
• Siempre Vigilando Gaviotas
• Solo Visitas Graciosas
• Soluciones Vía Google…

Pero, si no queréis perder el tiempo lo mejor es que vayamos al grano.

¿Qué es SVG, para qué sirve y por qué utilizarlo?

SVG son las siglas de Scalable Vector Graphics o, lo que es lo mismo, un formato vectorial para tus imágenes muy útil para los que nos movemos en el mundo online.

¿¡Cómo que no sabes lo que es una imagen vectorial?! Venga bah, explicamos, una imagen vectorial es aquella que puedes ampliar casi hasta el infinito y más allá y no se pixela.

Las imágenes .jpg, .png, o .gif, son los formatos más conocidos y no dan ningún problema salvo que quieras convertir la foto de tu amor platónico en una valla de publicidad, prueba a hacerlo y te dará la risa porque la imagen se quedará más pixelada que la cara de los hijos de los famosos cuando salen en Sálvame.

A diferencia de los mapas de bits (jpg, gif, png) las imágenes vectoriales pueden redimensionarse sin pérdida de calidad y sin convertirse en “pesos pesados” ?

Lo que más nos interesa, a nivel de diseño web, es que gracias a las imágenes SVG vamos a conseguir páginas web y tiendas online Responsive.

Dicho lo cual vamos a lo que nos interesa.

Ventajas de utilizar las imágenes en SVG

El formato SVG es un formato abierto, estándar y basado en XML recomendado por W3C.

Una de las mayores ventajas es la posibilidad que tiene de redimensionarse, por lo que, en el caso de los diseños responsive ya no habrá necesidad de sustituir, por ejemplo, un icono por otro más pequeño, ¿por qué? porque si utilizas un icono en formato SVG se reducirá en función del tamaño de la pantalla.

Es escalable y además pesa poco lo que mejorará los tiempos de carga de la web y por ende el posicionamiento orgánico.

Cuando se está cargando en una web se muestra de forma progresiva por lo que da la sensación de mayor velocidad de respuesta.

Hablando de mejoras en el posicionamiento SEO, el formato SVG permite incluir las tipografías dentro del archivo en formato TrueType y Tipo 1 lo que contribuye a su indexación por parte de los motores de búsqueda. Dicho de otro modo, al ser un lenguaje XML es indexable.

Los archivos SVG soportan estilos CSS, así que se realizamos un cambio en el estilo de nuestra web también se cambiará dentro del archivo. Además de admitir acciones como los rollovers (cambios al pasar el cursor por encima).

Como veis todo son ventajas. Si estáis con el diseño de una página web no dudéis en probar a utilizar las imágenes SVG. Y, recordad, en digitalDot tenemos a vuestra disposición un servicio de diseño web para tener desde el principio una página rápida, atractiva y funcional en todos los dispositivos. ¡Ven a conocernos!