RaphaëlJS is a JavaScript Vector Library. It uses SVG as a backend in browsers that support it (most modern browsers), and uses VML in IE. It provides a fairly easy to use API that allows you to programmably generate Vector graphics inline in a HTML document. The result is a vector canvas with dynamically generated content which can be made interactive using the mouse and keyboard handling built into the browser already for HTML, and includes animation functionality built into raphaël.

I've been using RaphaëlJS lately in various projects, mostly at work. RaphaëlJS powers two components inside of Kommonwealth v3 and plays a large role inside of one of our interface ideas for My Voice Site. I'm also thinking of rewriting the book reader we wrote in Canvas using Raphaël.

RaphaëlJS is fairly nice. It abstracts the vectors enough that not only do I not need to worry about IE, I also don't need to worry about unnecessary syntax, and as a bonus I get to animate things without any pain.

There are a few troublesome parts of it of course.

When you translate a path Raphaël appears to modify the path rather than trying to use any sort of translation matrix or commands built into the vector system. As a result when using .attr to change the path of a path you end up resetting the translation of the path. Even if that is fixed, it still isn't a nice thought that your SVG paths are having their path screwed with when you translate them, instead of using the translation ability built into SVG.

Support for text-anchor which raphaël maps to SVG emulates in VML doesn't appear to work in Chrome. So even though you can set a left/middle/right alignment, unless you're using the default middle alignment you have to do position calculations for text manually using getBBox() and halving the sizes. As for changing the vertical anchor, raphaël has no support for that, so you need to do that manually anyways.

There appears to be a bug inside of toBack, when I used it on a set raphaël ended up taking a nice layered button and did something that removed the top parts of the button (most likely it flipped the order of the nodes).

So RaphaëlJS works great on the surface, but for some of the more extensive uses of it, the library needs some maturing. That said, even if you have to do some manual calculations for text and a little extra calls to fix issues raphaël has, the painless IE compatibility (Ok, I haven't bothered to test in IE so I can't say anything) is a big win, as well as the handy API.