¿Qué son las imágenes SVG?
SVG (Scalable Vector Graphics), es un formato de imagen para gráficos vectoriales. La diferencia entre una imagen vectorial y una imagen de mapa de bits, es que la primera no depende de una resolución y podemos escalarla lo que queramos sin perder calidad. Por ejemplo, si una imagen con formato JPG o PNG la redimensionamos más allá de su tamaño y resolución originales, empezaremos a ver los píxeles en los bordes de las imágenes, los dientes de sierra y los artefactos. La imagen empezará a perder calidad y nuestro diseño web también. Lo podemos ver claramente en las siguientes imágenes, donde hacemos más grande la misma imagen de 150×150 px.
¿Por qué utilizar imágenes SVG en diseño web?
Como los archivos vectoriales no pierden calidad, las imágenes SVG nos ofrecen una solución perfecta para el diseño web. Sobre todo porque:
1. Tienen un peso muy reducido
Como no hay información de mapa de bits, ya que la imagen utiliza vectores para construirse, el tamaño no influye en el peso ni en la calidad. Siempre es el mismo vector, y el navegador calcula dónde deben estar los puntos a unir. Las imágenes SVG siempre pesarán lo mismo independientemente del tamaño al que las veamos en pantalla.
2. Ofrecen una calidad perfecta en pantallas retina
Las pantallas “retina” son pantallas que admiten una resolución de píxeles muy superior a las habituales. Con formatos de imagen de mapa de bits (JPG, PNG,GIF…) teníamos que utilizar imágenes diferentes según el dispositivo, o utilizar imágenes con más resolución y que vayan adaptándose según el tamaño de la pantalla. Sin embargo, con el formato SVG ese problema es historia.
3. El escalado del logotipo también es perfecto
Menos en tamaños muy pequeños en donde la pantalla tiene problemas para pintar cualquier pixel, los escalados de imágenes SVG son perfectos en proporción y calidad.
Crear archivos SVG
Para crear un archivo SVG nos hará falta un software de edición vectorial como por ejemplo Adobe Illustrator. Pero no es el único. Existen otras opciones para poder crear gráficos vectoriales para nuestros diseños web. Por ejemplo tenemos algunos gratuitos como: Inkscape o Skencil.
Lo único que tendremos que hacer, después de crear nuestro gráfico vectorial, es guardarlo con formato .svg. En Illustrator, nos aparecerá un cuadro de diálogo para elegir diferentes opciones. Con darle al “ok” sin tocar ninguna otra opción nos vale. Cabría destacar que, desde esta ventana, podríamos obtener el código para luego insertar el vector inline, si hacemos clic sobre el botón “Código SVG…”
Código que nos genera Illustrator al guardar como SVG
Insertar archivos SVG como <img>
Es la manera más fácil de usar imágenes vectoriales en diseño web y funciona en cualquier navegador (menos IE8 y anteriores…). Utilizamos el SVG como si de cualquier imagen se tratara, insertado con la etiqueta <img>.
<img src="img/careto-waka.svg" alt="careto waka" />
De este modo, tendremos nuestra imagen con un peso mínimo y una calidad máxima. Es muy recomendable para imágenes planas como los iconos que se utilizan muchísimo en diseño web. Como verás en el siguiente escalado, la imagen no pierde calidad al aumentarla de tamaño.
Ya no tienes excusa para que tus imágenes se vean perfectas en cualquier dispositivo. Aunque todavía tendremos que esperar para que sean visibles en los gestores de correo electrónico… ¡SVG molaaa!
