HTML: Imágenes en vectores

Imágenes en vectores vs píxeles

Las imágenes en vectores son imágenes que se crean a partir de fórmulas matemáticas, lo que permite que se puedan redimensionar sin perder calidad. En contraposición, las imágenes en mapa de bits (como las fotografías) se pixelan al redimensionarlas.

Pero no te preocupes, no necesitas hacer tú esas fórmulas para utilizar imágenes en vectores 😅. Puedes utilizar cualquier herramienta de diseño o descargar imágenes en vectores de internet.

SVG

El formato más común para imágenes en vectores es SVG (Scalable Vector Graphics). Podemos representar imágenes en SVG directamente en nuestro HTML utilizando la etiqueta <svg>.

Mira este ejemplo:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Tendría el siguiente resultado:

Bien, !acabo de hacer un círculo! 🎉

Puede parecer complejo, pero realmente, no vas a necesitar saber hacer un svg manualmente. Por lo general, vas a copiar el código de un svg que hayas descargado de internet o generado con una herramienta de diseño.

También puedes utilizar imágenes en formato svg cargándolas con la etiqueta <img>:

<img
  src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg"
  alt="Descripción de la imagen"
  width="300"
/>

Con el siguiente resultado:

De nuevo puedes comprobar que la imagen no pierde calidad en ningún tamaño. Te lo demuestro:

Puedo hacer la imagen así de pequeña:

O así de grande:

Usos comunes

Un uso muy común de las imágenes en vectores es para iconos, también, para logos dado su capacidad de visualizarse correctamente en cualquier resolución.

Además, las imágenes en vectores son muy útiles para animaciones, ya que puedes modificar sus valores de forma dinámica, pero, aún estamos en una fase temprana de nuestro aprendizaje para preocuparnos por eso.

En los siguientes capítulos

En los siguientes capítulos vamos a ver cómo añadir enlaces y botones en HTML.