Raphaël - Haciendo más sencillo el uso de SVG y VML

Si alguno ha estado en este mundillo en los últimos 9-10 años, sabrá que uno de los grandes desconocidos del desarrollo web son los gráficos vectoriales. Siempre ha sido muy sencillo añadir un gif a una página, pero a la hora de por ejemplo, dibujar líneas arbitrariamente, por ejemplo encima de la imagen o generación de gráficas dinámicamente, las elecciones tecnológicas eran pocas y además no estándar en general.

A la hora de hacer estas virguerías, siempre le he tenido un ojo echado primero al VML y luego al SVG, pero quien haya tocado el tema aunque minimamente sabrá que es muy potente, pero muy engorroso.

En este aspecto nos echa una mano Raphäel, una librería javascript que permite el uso de SVG y VML de forma (muy) sencilla y además es multiplataforma soportando incluso IE6 (quizás hasta IE5.5 SP2 que es donde yo empecé a hacer pinitos con VML).

Un ejemplo sencillo de Raphaël para dibujar un círculo sacado directamente de su web

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

Ahora un ejemplo más complejo




Bastante sorprendente verdad? pues os invito a pasaros por la web de Raphaël para ver éste y otros ejemplos interactivos.