Gráficos Vectoriales

A diferencia de las imágenes raster (fotografías, cubierta en la Unidad Uno) gráficos vectoriales (vector graphics) no son de píxeles dispuestos en una cuadrícula con valores diferentes.  En vez de eso, los gráficos vectoriales se almacenan como conjuntos de instrucciones que una computadora puede ejecutar para volver a crear un gráfico.

Un ejemplo simple de estas instrucciones pueden ser:

  1. Crea un círculo con un centro a 3 unidades de distancia arriba del centro de la imagen, y con un radio de 2 unidades.

  2. Rellene el círculo de color amarillo.

  3. Crea una línea desde el punto ubicado a 2 unidades debajo del centro de la imagen y a 3 unidades encima dos unidades a la izquierda del centro de la imagen.

  4. Crea una línea desde el punto ubicado a 2 unidades debajo del centro de la imagen y a 3 unidades encima dos unidades a la derecha del centro de la imagen.

Si hubiera un programa que pudiera ejecutar este script muy sencillo, podría mostrar en la pantalla lo siguiente:

SimpleScriptOutput.png

Lo bueno de esto es que, lo más probable, nunca tendrás que ver la secuencia de comandos que la computadora crea, al igual que no tienes que ver la descripción de píxeles y canales que se almacenan en una fotografía.  Sin embargo, si desearas trabajar a un nivel más avanzado, esto sería posible (y un poco más fácil que editar una imagen raster).  En lugar de estudiar comandos, vamos a utilizar las herramientas que convierten las cosas que dibujamos con el ratón y el teclado en una de estas secuencias de comandos que el equipo puede seguir cuando se quiera volver a producir una imagen para verse en la pantalla (la  pantalla es en realidad un mapa de bits). Luego, cuando hayamos terminado, podremos hacer que se ejecute la secuencia de comandos de nuevo para producir otra imagen gráficas que se podrá guardar en un archivo PNG.

También es posible que esta secuencia de comandos incluya una cierta cantidad de tiempo que debe transcurrir antes de que algo suceda.  Esto abre paso a animaciones; algunos ejemplos sencillos serían tener una persona dibujada en palitos moviéndose a través de la imagen, o ver el rebote de una pelota.

Uno de las beneficios muy importantes de las imágenes vectoriales es que todos los comandos de la imagen son relativos.  Si usted necesita aumentar el tamaño de la imagen, sólo tiene que cambiar las unidades que se aplican a todos los comandos.  En el ejemplo anterior, una unidad equivale a aproximadamete 10 píxeles, pero esto podría ser fácilmente modificado para que una unidad sea igual a 20 píxeles o incluso 100 píxeles.  La imagen automáticamente escala hasta el nuevo tamaño sin perder calidad, y no revela cuadrículos de pixeles al agrandarse.  Esto es lo contrario de la forma en que trabajan las fotografías: si usted fuera a tratar de escalar una foto al doble o diez veces el tamaño original, aparecerán muchos problemas en la imagen.

He aquí un ejemplo de la diferencia entre gráficos vetoriales y fotos raster, usando nuestra imagen simple.  En cada caso, el gráfico vectorial está a la izquierda y la foto raster a la derecha. 

Una unidad equivale a 10 pixeles.
SimpleScriptOutput.pngSimpleScriptOutput.png
Una unidad equivale a 20 pixeles.
SimpleScriptOutput-Vector2.pngSimpleScriptOutput-RasterScale2.png
Una unidad equivale a 100 pixeles.  (El navegador web reduce esta image a 40 pixeles por unidad para adaptarse al tamaño de la pantalla; si quieres ver la imagen completa usa el botón derecho del ratón y selecciona la opción para ver la imagen por separado.)
SimpleScriptOutput-Vector10.pngSimpleScriptOutput-RasterScale10.png
Puedes ver que como aprendimos en la sección de fotos, la grafica raster no se escala hasta el tamaño grande muy bien.  Sin embargo, el gráfico vectorial sigue viéndose lisa y limpia en cualquier tamaño.

Además de la amplicación limpia, los gráficos vectoriales generalmente ocupan menos espacio.  En una imagen de mapa de bits (raster), los datos necesitan ser almacenados por cada píxel (en tres o cuatro canales).  Si usted tiene imágenes de gran tamaño, esto pueden ser de millones de bytes.  Los gráficos vectoriales en cambio sólo almacenan la información necesaria para crear las formas y ponerles color.  Para el ejemplo anterior, esto son sólo cuatro comandos, cada uno tomando sólo unos pocos bytes.  Hay cosas que usted puede hacer para crear gráficos vectoriales muy complicado, pero por lo general van a ser mucho más pequeños que sus contrapartes rasterizados.

La otra cosa muy buena sobre los gráficos vectoriales es que cuando se están utilizando programas gráficos como Inkscape o Illustrator para editar, es muy fácil seleccionar objetos.  Para las fotos hemos tenido algunos problemas en la selección de diferentes objetos (como el avión y el brazo de la estatua).  Sin embargo, ya que en gráficos vectoriales los comandos que crean cada objeto se almacenan, al hacer clic sobre un objeto, es fácil para el programa adivinar se objeto que está tratando de seleccionar.  A continuación, puede modificar fácilmente el objeto cambiar el tamaño, rotarlo, o moverlo, por ejemplo.

Formatos de Archivo

El formato de archivo principal actualmente en uso es SVG o Scaleable Vector Graphics (Gráficos Vectoriales Escalables, ver: http://es.wikipedia.org/wiki/SVG) que es un tipo de archivo legible por humanos llamado XML (eXtensible Markup Language - lenguaje extensible de marcado, ver: http://es.wikipedia.org/wiki/XML).  A pesar de que XML y SVG son legibles, no los estaremos levendo directamente como parte de este material.  El SVG es compatible con la mayoría de programas de dibujo vectorial, sin embargo, todavía no es soportado por todos los navegadores web (aunque esto está cambiando rápidamente).  Si sólo desea utilizar las imágenes en páginas web, lo mejor es convertirlos a formato Portable Network Graphics (PNG), que es un formato de mapa de bits sin pérdidas.

El otro formato mayor de gráficos vectoriales es el EPS o Encapsulated Post Script (Post Script encapsulado).  Post Script es un tipo de archivo utilizado para la impresión (especialmente impresión industrial), y las imágenes EPS están diseñadas para ser fácilmente colocadas dentro de un documento Post Script.  Este formato ha existido por mucho más tiempo que el SVG, y es compatible con muchas más herramientas (sobre todo las más antiguas).  Del mismo modo, no se recomienda para su uso con los navegadores web.