RaphaelJS es una librería de javascript para desarrollar gráficos y animaciones vectoriales en SVG y VML. ¿Qué es SVG? ¿Por qué vamos a utilizar gráficos vectoriales? ¿Para qué utilizar una librería para trabajar con SVG? Todas estas preguntas son las que debemos comprender antes de empezar a trabajar.
Gráficos Vectoriales Escalables o abreviado del ingles SVG (Scalable Vector Graphics) es un estandar propuesto en el año 2001 por el W3C para estandarizar los gráficos vectoriales. Allá por el año 1998, se presentaron 2 propuestas de gráficos vectoriales, por un lado se presento PGML por parte de Adobe, IBM, Netscape (Mozilla y Firefox) y Sun (Java, ahora parte de Oracle). Por otra parte se presento VML que tuvo más éxito por parte de Autodesk (creadores de Autocad), Macromedia (creadores de flash y posteriormente comprado por Adobe) y Microsoft. Normalmente cuando se hacen varias propuestas de este estilo al W3C, se acaba decantando por una en particular, pero en este caso, se optó por el camino del medio y el W3C propuso SVG que no es mas que la mezcla de VML + PGML.
Con SVG se crea un documento XML que puede ser utilizado tanto en un archivo independiente con extension *.SVG como embebido dentro de una página web al ser un XML y puede ser manipulado con javascript. SVG tiene su propio árbol DOM similar al HTML por lo que fácilmente desde javascript podremos capturar eventos, cambiar sus caracteristicas, así como dar estilos desde CSS.
Una vez tenemos la base, podemos entender mejor el papel de RaphaelJS en todo esto. RaphaelJS es una librería que nos promueve de una gran cantidad de objetos y métodos para encapsular los documentos SVG. Esta necesidad vino dada en su dia por los navegadores antiguos que interpretaban VML y los mas modernos que fueron interpretando SVG. RaphaelJS genera los documentos dinámicamente en uno u otro lenguaje, dependiendo de lo que soporte el navegador, siempre dando prioridad al estandar SVG.
Si todos los navegadores actuales soportan SVG ¿Por qué utilizar una librería como RaphaelJS y no SVG nativo? Muy sencillo y es que cuando queremos generar unos gráficos en SVG dinámicamente, con animaciones y demás, necesitamos de un respaldo de utilidades que nos faciliten en todo lo posible el trabajo, ya que el objetivo es ser productivos. Por ejemplo, para quienes conozcan jQuery, todo el mundo sabe hacer un document.getElementById, pero siempre acabamos haciendo $(«#id») porque es más cómodo, ademas de ofrecernos herramientas muy útiles. Con RaphaelJS pasa lo mismo, si queremos generar una animación en SVG, nos ofrece funciones con calbacks para generar animaciones dinámicamente con varias funciones easing o podemos guardar los objetos de SVG según los vayamos creando para reutilizarlos mas adelante, ademas de ser un poco mas sencillo de utilizar que SVG a pelo.
Este contenido y mas ira apareciendo en el curso de Raphael JS – Gráficos vectoriales con javascript y mas en concreto en el primer capítuo: Introducción a RaphaelJS.
Artículos relacionados:
Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML
Llamar a una función de un padre desde iframe
Namespaces o espacios de nombre virtuales en javascript
Selectores dobles con JQuery, aumentando el rendimiento de JQuery
Guía de buenas prácticas para aumentar el rendimiento de jQuery