SVG (Gráfico Vectorial Escalable) es un nuevo formato que soporta HTML5 y nos ofrece imágenes vectoriales que pueden redimensionarse hasta el infinito y no perder calidad.
Vamos a ver cómo usar archivos SVG nos ayudarán a reducir el tamaño de nuestra web con este ligero formato y como siempre se mantendrá una muy buena calidad en estas imágenes, ya sea en un móvil pequeño o en un monitor de alta resolución.
Una de las grandes ventajas que tiene SVG es que está basado en XML y se puede comprimir fácilmente en las transmisiones, lo que ayuda a reducir el tamaño de cara a un móvil.
Los archivos SVG se pueden usar de varias formas: como si fuese un elemento más en la página HTML (copiando tal cual el SVG), añadiendo un objeto SVG y añadiendo una imagen con formato SVG.
Diferencia entre SVG y una imagen normal
Las imágenes de mapa de bits (como .jpg, .png o .gif) almacenan la información de todos sus píxeles, mientras que las imágenes vectoriales (como SVG) almacenan líneas, curvas, degradados y el resto de información necesaria para crear la imagen y el propio programa que lo visualiza es el que crea la información de cada píxel.
Esta característica hace los vectores perfectos para el Responsive Design, ya que podemos redimensionar iconos o imágenes sin perder calidad.
La forma más simple de usar un archivo SVG es como si de una imagen cualquiera se tratase.
<img src="nombredelaimagen.svg">
También se puede usar como imagen de fondo a través de CSS, i gual que hacemos con otra imagen, lo que nos puede ayudar a reducir el tamaño de los archivos que recibe nuestra página para funcionar.
Compatibilidad
SVG tiene un gran soporte por parte de todos los navegadores, pero en algunos antiguos (ya sean de escritorio o móviles) pueden no tener compatibilidad.
Es una excelente idea empezar a usar SVG en nuestros diseños, lograremos tener una calidad óptima sin incrementar demasiado el tamaño de los archivos descargados.
