Question

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
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.

Answer 1

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.

SnapSVG as a pure SVG version of Raphael

SnapSVG is the successor of Raphael. It is supported only in the SVG enabled browsers and supports almost all the features of SVG.

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. And if you want a non-jQuery solution then SnapSVG is a good option.