Trasteando con SVG

La verdad es que la evolución de la web y sus estándares es apasionante. Si, muchas veces nos hemos tirado de los pelos por incompatibilidades, y aún queda para que todos esos problemas queden atrás... pero también podemos frotarnos las manos con las posibilidades que ya podemos ver y tocar.

Uno de los elementos que me lleva tiempo interesando es SVG. Siempre me ha gustado la idea de expresar gráficos como XML me parece elegante, legible y portable. Y gracias a que son documentos XML se pueden adaptar al estílo de la página utilizando CSS.

A los que siempre hemos huido de flash, por una razón y otra, ahora podemos sentir el potencial de este (bueno, al menos parte) utilizando SVG. Ya que no solo podemos describir elementos con XML, también podemos modificarlos utilizando JavaScript.

Para ir aprendiendo he dedicado un par de tardes a hacer este indicador que podría encajar en cualquier panel de control. Puedes descargarlo desde aquí.

Crear imágenes SVG es sencillo y toda la documentación está en la web del W3C como cualquier otro estándar. Veamos los puntos más importantes de esta imagen:

1. ViewBox

El ViewBox nos indica la zona visible del dibujo. Si no declaramos un ViewBox este se adaptará a la zona en la que se esté dibujando el documento. Si por el contrario lo declaramos, el dibujo se reescalará para adaptar el ViewBox a la zona donde se esté dibujando.

2. Definiciones (defs)

Es posible reutilizar parte del código dentro del mismo documento utilizando definiciones. Podemos pensar en las definiciones como componentes que se podrán incrustar posteriormente tantas veces como queramos.

En este dibujo se han definido dos componentes: indicator_step y needle. El primero es utilizado para dibujar las marcas que nos ayudan a leer los valores indicados por la aguja, el segundo es la aguja del indicador.

3. Dibujado

Finalmente dibujamos todos los componentes de dentro a fuera. Primero dibujamos el fondo dibidido en tres areas de diferentes colores para distinguir rápidamente la importancia del nivel indicado:


Sobre el fondo vamos a dibujar un texto para indicar de forma numérica el nivel mostrado po el indicador:


A continuación reutilizamos la definición indicator_step para las marcas para dibujar los pasos del indicador una marca cada 15 grados:


Finalmente dibujamos la aguja reutilizando la definición needle. Vemos que dentro se define una animación. Esta animcación ahora no tiene utilidaz, pero la declarración nos ayudará a mover la aguja mediante scripting de forma más sencilla:

4. Scripting

Ya tenemos el dibujo, ahora podemos manipularlo gracias a que podemos acceder a él a través del DOM y una serie de APIs extra definidas en el estándar SVG. Este script es realmente sencillo, pero nos da una idea de como realizar unas transformaciones básicas.