Difícil es abrir en Internet una página en la que no encontremos un gráfico. Ya sean GIF, JPG o PNG. Atrás quedaron los años donde veíamos las páginas repletas de texto plano y con unos fondos grises que tiraban para atrás.
Y en todo este trayecto hemos pasado épocas donde la sobrecarga de imágenes inundaba nuestra pantalla, la moda de los gráficos 3D para los títulos y los gráficos Flash.
Ahora, la vuelta de tuerca, es diferente. Ya no se busca el hacer nuestra página más elegante, sino más útil (en cuanto a la información se refiere). Buscamos gráficos que nos representen información. Y es que muchas veces «más vale una imagen que mil palabras».
SVG o Scalable Vector Graphics. Nuestros gráficos vectoriales. Permiten definir gráficos basados en texto (aunque esta no es su única cualidad) y no solo eso, sino que ese texto (o información) lo podemos hacer participe del contenido de la página. Esto lo consigue mediante estructuras XML.
Y después de todo este rollo… a lo que vamos. ¿Qué hago para montarme mi primer gráfico SVG?
El primer paso es definir un documento XML, pero con extensión SVG. Su esqueleto general es el siguiente:
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg"> </svg>
Dentro de la estructura podremos ir insertando gráficos individuales. Por ejemplo un circulo, y encima en rojo (máxima dificultad)…
<circle cx="600" cy="200" r="100" fill="red"/>
De este nos valdrá con saber que cx es la coordenada en el eje X, cy la coordenada en el eje Y y r el radio. Ahhh, se me olvidaba, fill, el color de relleno.
Al final, nuestro gráfico SVG quedará algo así:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="600" cy="200" r="100" fill="red" />
</svg>
Hoy en día el soporte de visualización de los gráficos SVG lo dan Opera 9 y FireFox 1.5. En el resto de navegadores necesitaremos un plug-in.
Cómo plug-in para ver los gráficos SVG tenemos el gratuito de Adobe SVG Viewer. Disponible en http://www.adobe.com/svg/.
Otra opción es utilizar el navegador Squiggle, del proyecto Apache XML Graphics Project.
