Como
ya hemos resaltado, GIF y JPEG son formatos gráficos de mapa
de bits, es decir, que su estructura se basa en una matriz de puntos,
cada punto correspondiente a un punto virtual del gráfico, y
cada uno de ellos incorporando la información correspondiente
al color que le acompaña.
Evidentemente,
las desventajas de este tipo de gráficos son palpables, ya que
ofrecen muchas dificultades a la hora de hacer modificaciones sobre
el gráfico original (cambiar texto, color, etc.), o simplemente
a la hora de redimensionar la imagen, ya que se redimensionan los pixeles
y no los elemento independientes, haciendo que estos pierdan definición
y calidad (elementos de la imagen menos nítidos, bordes pixelizados,
ilegibilidad de textos, etc.).
Todos
estos inconvenientes se solucionan con otro tipo de imágenes,
las imágenes vectoriales.
Las
imágenes vectoriales, al contrario que los mapas de bits, no
almacenan la imagen como una matriz de puntos con su correspondiente
color, sino como un conjunto de los elementos independientes que la
forman. En realidad una imagen vectorial está formada por las
instrucciones que definen cada uno de los elementos de la imagen.
La
ventaja de las imágenes vectoriales es doble, ya que a la posibilidad
de rediseño posterior de la imagen hay que sumar que muchas veces
el tamaño de estos gráficos puede ser muchísimo
menor.
Por
ejemplo, imaginemos una imagen de 800x600 pixeles en donde sólo
halla un texto sobre un fondo de color. En un mapa de imágenes
esto ocuparía mucha memoria, ya que tendríamos que almacenar
la matriz de puntos completa, en cambio, en una imagen vectorial esto
se solucionaría con unas pocas instrucciones. Y ya sabemos lo
importante que es la optimización a la hora de construir nuestra
web, ya que el tiempo de descarga es un factor importante.
Como
todo, las imágenes vectoriales, a la hora de hablar de páginas
web, tiene sus ventajas y sus inconvenientes. Sus ventajas ya las hemos
citado: fácil rediseño y minimización del peso
gráfico (en algunas ocasiones). Los inconvenientes, hoy por hoy,
por desgracia, son más que las ventajas, ya que el soporte es
mínimo y es ahora cuando se está empezando a utilizar
este tipo de tecnología, aunque siempre con el riesgo de la incompatibilidad.
De
cualquiera de las formas, los formatos de gráficos vectoriales
para la web se pueden dividir en 2 tipos: los soportados mediante el
plug-in correspondiente y los basados en lenguajes de marcado (todos
ellos con el consabido riesgo de la incompatibilidad).
Los
primeros son los gráficos vectoriales “clásicos”,
que necesitan del plug-in correspondiente para poder ser visualizados
en un navegador web.
El
segundo tipo, los basados en lenguajes de marcado, son la última
alternativa en la implantación de imágenes vectoriales.
Vamos a verlos con mayor detenimiento:
Imágenes vectoriales basadas en lenguajes de marcado
El
lenguaje de marcado utiliza texto (sin formato) para definir etiquetas
y otros elementos. El ejemplo más claro de lenguaje de marcado
es el HTML, en donde cada etiqueta escrita se traduce en un elemento
legible a través de un navegador web.
En
nuestro caso, las imágenes vectoriales basadas en lenguajes de
marcado, los elementos de esas imágenes se definen igualmente
con texto, que después es interpretado por el navegador web,
al igual que un archivo HTML es interpretado por un navegador.
Los
estándares más “populares” son: DrawML,
PGML, VML, Web Schematics
y SVG.
DrawML
es un estándar de imágenes vectoriales para web orientado
a la creación de organigramas y gráficos esquemáticos.
DrawML
es una aplicación de XML (eXtensible Markup Language : lenguaje
de marcado extensible) y hace uso del lenguaje Java para definir los
gráficos que después se presentan en la ventana del navegador.
Mediante
DrawML podemos definir complejos organigramas gráficos con necesidad
de pocas instrucciones.
PGML
(Precision Graphics Markup Language : lenguaje de marcado de gráficos
de precisión) es una aplicación de XML que permite la
creación de gráficos complejos y de calidad, ya que permite
la posibilidad de renderizado.
VML
(Vector Markup Language : lenguaje de marcado vectorial) es un estándar
desarrollado por la empresa Microsoft que intenta hacer sencillo el
desarrollo de este tipo de gráficos, mediante atributos y etiquetas
cortas y descriptivas.
VML
es una aplicación de XML que utiliza CSS2 (Cascade Style Sheets,
level 2 : hojas de estilo en cascada, nivel 2).
El
estándar VML permite la creación de imágenes complejas
y de precisión, animación, renderizado, transparencia,
corrección gamma y cromaticidad.
Web
Schematics, al igual que el estándar DrawML, está
diseñado para el fácil diseño de organigramas y
gráficos de esquemas. Para trabajar utiliza las funciones de
HTML y CSS1, con lo que se pueden diseñar fácilmente figuras
geométricas, como círculos, rectas, polígonos,
etc.
SVG
(Scalable Vector Graphics : gráficos vectoriales dimensionables)
es un formato desarrollado por el W3C para la creación de gráficos
vectoriales.
SVG
es una aplicación XML que soporta, entre otras, tecnología
CSS2. Permite corrección gamma, cromaticidad y otros efectos.
Como vemos, hay variedad y calidad. El problema: la no compatibilidad
con todos los navegadores web. El futuro: esperanzador.
Artículo
de David Gutiérrez Verdura
