I'm working on an interactive interface using SVG and Javascript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know (1) what the trade-offs are between the two, and (2) where the development momentum seems to be.
I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm primarily interested in the most elegant way to create, animate, and manipulate individual items on an SVG canvas.
Thanks!
I think it is not totally unrelated but did you consider canvas? something like Process JS can make it simpler.
For posterity, I'd like to note that I ended up choosing Raphael, because of the clean API and "free" IE support, and also because the active development looks promising (event support was just added in 0.7, for instance). However, I'll leave the question unanswered, and I'd still be interested to hear about others' experiences using Javascript + SVG libraries.
I will throw my vote behind Raphael - the cross-browser support, clean API and consistent updates (so far) make it a joy to use. It plays very nicely with jQuery too. Processing is cool, but more useful as a demo for bleeding-edge stuff at the moment.
I'm a huge fan of Raphael and the development momentum seems to be going strong (version 0.85 was released late last week). Another big plus is that its developer, Dmitry Baranovskiy, is currently working on a Raphael charting plugin, g.raphael, which looks like its shaping up to be pretty slick (there are a few samples of the output from the early versions on Flickr).
However, just to throw another possible contender into the SVG library mix, Google's SVG Web looks very promising indeed (even though I'm not a big fan of Flash, which it uses to render in non-SVG compliant browsers). Probably one to watch, especially with the upcoming SVG Open conference.
You should also take a look at svgweb. It uses flash to render svg in IE, and optionally on other browsers (in the cases where it supports more than the browser itself does).
Oh Raphael has moved on significantly since June. There is a new charting library that can work with it and these are very eye catching. Raphael also supports full SVG path syntax and is incorporating really advanced path methods. Come see 1.2.8+ at my site (Shameless plug) and then bounce over to the Dmitry's site from there. http://www.irunmywebsite.com/raphael/raphaelsource.html
I've recently used both Raphael and jQuery SVG - and here are my thoughts:
Raphael
PROS: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.
CONS: is a layer over the actual SVG markup, makes it difficult to do more complex things with SVG - such as grouping (it supports Sets, but not groups). Doesn't do great w/ editing of already existing elements.
jQuery SVG
PROS: a jquery plugin, if you're already using jQuery. Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily
CONS: architecture not as extensible as Raphael. Some things could be better documented (like configure of SVG element). Doesn't do great w/ editing of already existing elements. Relies on SVG semantics for animation - which is not that great.
Conclusion: If you're doing something quick and easy, Raphael is an easy choice. If you're going to do something more complex, I chose to use jQuery SVG because I can manipulate the actual markup significantly easier than with Raphael.
I've written a blog post for some guidance on how to do this. It is possible with some simple Javascript to extract the data needed from Raphael itself (i.e. not the DOM which means SVG/VML mixups). That data is then just sent along to a server-side script which re-renders the SVG file. All explained, with code, here: http://www.benbarnett.net/?p=104
Raphael is definitely easier to set up and get going, but note that there are ways of expressing things in SVG that are not possible in Raphael. As noted above there are no "groups". This implies that you can't implement layers of Coordinate Transfomations. Instead there is only one coordinate transform available.
If your design depends on nested coordinate transforms, Raphael is not for you.