Saltar la navegación

2.4.6. Gráficos vectoriales

Los objetos Bézier o gráficos vectoriales son imágenes generadas con segmentos de línea conectados por nodos y resultan de un promedio sobre las dos tangentes creadas por los nodos o puntos de control.

Ejemplo de objeto Bézier

Los vectores pueden ser curvos o rectos, según determinen los manejadores que parten de los nodos. Los manejadores son elementos que sirven para controlar el grado de las curvas y la dirección de los segmentos.

Esto significa que los objetos vectoriales no dependen de la resolución de la imagen, su tamaño de almacenamiento es mínimo comparado con los gráficos de mapa de bits ya que el archivo vectorial guarda una formula matemática en lugar de los parámetros de color de cada uno de los píxeles.

Variaciones sobre una misma curva de Bézier:

variaciones de una misma curva

Variaciones sobre una misma curva de Bézier a partir de la simple modificación de los dos puntos de control externos. Fuente: Alberich 2004.

Formatos de archivos de gráficos vectoriales

SVG
Formato creado por Adobe para gráficos bidimensionales estáticos o animados. Acrónimo de Scalable Vector Graphics. Es uno de los formatos vectoriales que tiende a convertirse en estándar ya que no necesita plugins para reproducirse en la mayoría de los navegadores web, excepto en Internet Explorer que aún requiere el visualizador para SVG.

PDF
Formato de grafico compuesto (vectorial y de mapa de bits). Acrónimo de Portable Document Format. Es un formato de documento portátil desarrollado por Adobe Systems. Su principal ventaja es la capacidad de embeber fuentes, lo que permite compartir archivos con idéntica apariencia en computadoras y sistemas operativos muy disímiles entre sí.

EPS
Acrónimo de PostScript encapsulado. De igual modo que el formato WMF y EMF es un formato de grafico vectorial pero que permite la inclusión de mapas de bits y metadatos para facilitar su uso.

WMF
Acrónimo de Windows MetaFile o metaarchivo de Windows. Formato de grafico vectorial pero que permite la inclusión de mapas de bits con 16 bits, del mismo modo que el formato PostScript.

EMF
Acrónimo de Enhanced MetafileEvolución del formato WMF que usa hasta 32 bits. 

AI
Es la extensión de los archivos vectoriales creados con Adobe Ilustrator.

CDR
Es la extensión de los archivos vectoriales creados con Corel Draw.

SWF
Es la extensión de los archivos compilados de Adobe Flash.


Diferencia entre imágenes de mapa de bits y gráficos vectoriales

Cita

“Existen dos formas de almacenar la información gráfica en formato digital. En primer lugar las imágenes llamadas vectoriales, en las cuales cada elemento de la imagen, con su posición, tamaño y características queda definido por una función matemática. Este tipo de imágenes permite desplazar, redimensionar o variar las características de cada elemento sin afectar al resto de la imagen. Son útiles para representar símbolos, esquemas o dibujos lineales.

Para las imágenes fotográficas, se emplean los formatos digitales llamados mapas de bits. En ellos la imagen se divide en pequeños puntos (pixels) y cada uno de ellos almacena por separado la información referida al color exacto de ese punto.”

(Ferreres y Roca Estellés, 2000)

Los gráficos vectoriales son un recurso indispensable para diseñar representaciones bimedia. En este punto es muy importante diferenciarlos de las imágenes de mapa de bits considerando el punto de vista instruccional y los métodos de producción:

Gráficos vectoriales Imágenes de mapas de bits
Son gráficos con un nivel de iconicidad bajo, abstracto: esquemas, diagramas, flujogramas, etc. Utilizan elementos visuales como líneas, flechas y recuadros que se pueden combinar con texto distribuido en el espacio. Son imágenes con un alto nivel de iconicidad, de aspecto realista, concreto: fotografías, ilustraciones, bocetos, artes plásticas figurativas, etc.
Pueden integrar textos sintéticos y en esos casos configuran gráficos bimedia. No emplean texto, a menos que éste sea integrado a la imagen mediante el dibujo o la fotografía.
Consisten en fórmulas matemáticas que generan un conjunto de vectores. Se diseñan mediante líneas y figuras geométricas. Consisten en una matriz de píxeles.
En general, utilizan una paleta de colores reducida con tonos de colores bien diferenciados entre sí. Habitualmente utilizan paletas cromáticas complejas (millones de colores).
Son imágenes creadas expresamente con una finalidad didáctica. Su función didáctica es accidental, meramente ilustrativa. El autor las vincula arbitrariamente con algún concepto.
Se sugiere contrastar estas diferencias con las comparaciones señaladas en la tabla de Imágenes didácticas "per se" y "per accident".

Auto evaluación

Diferencias de técnicas de producción entre imágenes de mapa de bits y gráficos vectoriales

Este ejercicio tiene por finalidad identificar las diferencias de las técnicas de producción entre estos dos modos de creación de la información gráfica digital.

Documento de autoevaluación

 En el documento adjunto aparece una lista de imágenes. Indique cuáles se crearon con la técnica de mapa de bits y cuáles fueron diseñadas como gráficos vectoriales.


En algunos casos conviene aumentar el zoom del documento hasta 400% u 800% para percibir las diferencias.

Leer con atención

También es importante diferenciar: 

  1. el modo de producción, en el que un gráfico vectorial se dibuja con segmentos de línea conectados por nodos,
  2. de la apariencia y el formato final de las imágenes, ya que frecuentemente se exporta los gráficos vectoriales al modo de mapa de bits para poder visualizarlos sin la necesidad de plugins adicionales en las páginas web.

Auto evaluación

Diferencias de formato y apariencia final entre imágenes de mapa de bits y gráficos vectoriales

Este ejercicio tiene por finalidad identificar las diferencias de formato y la apariencia final de las imágenes cuando se las integra a un documento que admite ambas modalidades de almacenamiento de información gráfica digital.

Documento de autoevaluación

 En el archivo adjunto aparece una lista de imágenes, todas ellas fueron diseñadas con el método vectorial, pero algunas se muestran en ese formato y otras fueron convertidas a imágenes de mapa de bits. Indique cuáles se integraron con la técnica original de vectores y cuáles se convirtieron a bitmaps.


En algunos casos conviene aumentar el zoom del documento hasta 200% o 400% para percibir las diferencias.

Para ampliar

Feria, Manuel (2010). Consejos para la confección de gráficos científicos, en Quaderns de la Fundació Dr. Antoni Esteve Nº20. Barcelona. Disponible en: <www.raco.cat/>. 

Vila, Cristóbal (2009). Algunos consejos para dibujar con trazados bézier, disponible en: <www.etereaestudios.com/>.

Recursos web

Aplicaciones de diseño vectorial en línea:

Google drawings es un editor básico de gráficos vectoriales.

Lucidchart permite dibujar distintos tipos de gráficos: organigramas, flujogramas, mapas mentales y diagramas de red.

Gomockingbird sólo se utiliza para diseñar wireframes (son los gráficos para representar la arquitectura de la información en las redes).

Mindomo permite dibujar mapas mentales.

Freepik provee ilustraciones, iconos y archivos de vectores gratis para páginas web, banners, presentaciones, revistas y publicidad.