Mi primer gráfico SVG

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" />

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 plugin 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.