¿Qué son los gráficos vectoriales?

En la web, trabajarás con dos tipos de imágenes — imágenes de mapa de bits e imágenes vectoriales:

• Las imágenes de mapas de bits son definidas usando una cuadrícula de píxeles — un archivo de imagen de mapa de bits contiene información que muestra exactamente en dónde está localizado cada pixel, y de qué color debe ser exactamente. Los formatos de mapas de bits populares incluyen Bitmap (.bmp), PNG (.png), JPEG (.jpg), y GIF (.gif.)
• Las imágenes vectoriales son definidas usando algoritmos — un archivo de imagen vectorial contiene definiciones de formas y rutas que la computadora puede usar para calcular cómo debe verse la imagen cuando se renderice en pantalla. El formato SVG nos permite crear gráficos vectoriales muy potentes para usar en la web.

Para darte una idea de la diferencia entre los dos, vamos a ver un ejemplo. Puedes encontrar este ejemplo en nuestro repositorio de Github como vector-versus-raster.html — este te muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. la diferencia es que la de la izquierda es un PNG, y la de la derecha es una imagen SVG.

La diferencia se hace aparente cuando haces zoom en la página — la imagen PNG se pixelea a medida que haces zoom porque contiene información sobre dónde debe estar cada pixel (y qué color) — cuando a esta se le hace zoom, cada pixel es simplemente incrementado en tamaño para llenar múltiples pixeles en la pantalla, entonces la imagen empieza a verse como con bloques. La imagen vectorial, sin embargo, continua viéndose clara y nítida, porque no importa de qué tamaño sea, los algoritmos son usados para calcular las formas en la imagen, con los valores simplemente siendo escalados ya que se hace más grande.

Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes en mapa de bits, porque sólo necesitan manejar unos cuantos algoritmos, en lugar de la información de cada pixel en la imagen individualmente.

¿Qué es SVG?

SVG es un lenguaje basado en XML para describir imágenes vectoriales. Es básicamente un marcado, como HTML, excepto que tendrás muchos elementos diferentes para definir las formas que quieres que aparezcan en tu imagen, y los efectos que quieres que se apliquen a estas formas. SVG es para marcar gráficos, no contenido.  En el final más simple del espectro, tendrás elementos para crear formas simples, como <circle> y <rect>. Las características más avanzadas de SVG incluyen <feColorMatrix> (transformar colores usando una matriz de transformación), <animate> (animar partes de tu gráfico vectorial) y <mask> (aplicar una máscara sobre la parte superior de la imagen).

Como un ejemplo simple, el siguiente código crea un círculo y un rectángulo:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

Del ejemplo anterior, puedes tener la impresión que SVG es código fácil. Sí, puedes escribir código simple SVG en un editor de texto, pero para una imagen compleja esto empieza rápidamente a volverse un poco difícil. Para crear imágenes SVG, la mayoría de personas usan un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes te permiten crear una variedad de ilustraciones usando varias herramientas de gráficos, y crear aproximaciones de fotos (por ejemplo la funcionalidad de trazo de mapas de bits de Inkscape).

SVG tiene algunas ventajas además de las descritras hasta el momento:

• El texto en imágenes vectoriales sigue siendo accesible (lo que también le beneficia a tu SEO).
• Los SVG se prestan muy bien para estilizar o cambiar dinamicamente, ya que cada componente de la imagen es un elemento que puede ser estilizado con CSS o modificado con JavaScript.

Entonces ¿Por qué alguien querría usar gráficos de mapas de bits en lugar de SVG? Bueno, SVG tiene algunas desventajas:

• SVG puede volverse complicado muy rápido, lo que significa que el tamaño de los archivos pueden crecer; Los SVG complejos pueden tomar un tiempo significante de procesamiento en el navegador.
• SVG pueden ser más difíciles de crear que las imágenes de mapas de bits, dependiendo de qué tipo de imagen estás intentando crear.
• SVG no está soportado en navegadores antiguos, así que puede que nos sea adecuado si necesitas soportar versiones antiguas de Internet Explorer con tu sitio web (SVG empezó a ser soportado desde IE9).

AGREGANDO GRÁFICOS VECTORIALES A LA WEB

In-text: («Agregando gráficos vectoriales a la Web», 2020)

Your Bibliography: Agregando gráficos vectoriales a la Web. (2020). Retrieved 30 January 2020, from https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Agreg