jQuery SVG vs. Raphael

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.

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

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

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

View more solutions

Comments

[Luke Dennis]

I have looked at both canvas in general and Processing in particular. The problem is that (as far I know) mouse events cannot be easily attached to individual items on the canvas, for features like drag and drop, unlike SVG, which is fully exposed to the DOM.

[Bharani]

I haven't done extensive work with canvas but have a look at Flot - jquery plugin that uses canvas for charts. It handles mouseclicks pretty well.

[Nosredna]

Mouseclicks yes, but not dom events on items in the canvas. In fact, for Canvas you can't put the event handler on the canvas (because of IE), although you can put it on a div that holds the canvas.

[Anatoly G]

canvas is great for bitmaps, SVG is great for vector graphics. The capability of SVG to scale is fantastic for that. I think canvas and SVG are complementary technologies.

[Roalt]

The documentation of RaphaelJS isn't that great either, it's limited and you sometimes have to go into SVG or jQuery documentation to get all information. That said, with the demo's (source code) available as well as the forum and many users, I manage to get the answers I need.

[Peter Ajtai]

The nice IE support for Raphael is great. Squares with rounded corners in IE?... no problem ;)

[topright gamedev]

It's Raphael v. 1.5.2 at the moment.

[wheresrhys]

I've just started using Raphael and found the documentation to be some of the best I've come across for a javascript API, with very clear examples next to the more formal specifications

[strongriley]

Don't forget that RaphaelJS has backwards compatibility to VML for Internet Explorer. That's HUGE because SVG doesn't work on the older browsers.

[Anatoly G]

Question was specifically about SVG, not backwards compatibility. If desire is cross-browser vector graphics, you're correct.

[Neil]

Regarding mouse events for canvas, have a look at Easel.js which handles all this for you.

[Anish Gupta]

jQuery SVG has another con. You need the large jQuery library for it to work. I can't edit for some reason.

[Luke Dennis]

For pure graphics rendering, I absolutely agree. The one thing that SVG/VML offer which canvas does not is a DOM and an event hierarchy, since drawn elements are full DOM objects rather than a raw bitmap. With canvas, X/Y click coords are the best than can be done. At any rate, the project is long since over, so it's not currently relevant, but thanks for your answer. :)

[ARF]

Another jQuery SVG con is that the project although the project is opensoucer (GPL and MIT) it seems to be abandoned by its developer (version 1.4.5 last update 28 april 2012). jquery.svg.dom causes some of conflicts with jQuery 1.8. Ideally I would wait for someone to take over the project and hopefully put it into github

[Anatoly G]

@Hoffmann certainly now this answer isn't so great - with RaphaelJS getting major releases and big support from commercial entities, that project is probably a better option - however, other options, like Kinetic and fabric.js have come about to address the divide between SVG and Canvas for different types of graphics needs.

[Dyin]

Raphael can't and won't manipulate existing SVG elements on your HTML document. This is a very serious limitation in my opinion.

[Tebe]

it's not a big deal to notice that current version is 2.1.2. This comment is waiting to get correction by some another guy in a few years...

[Martin Gross]

@Dyin If you really need this, I would use SnapSVG: "Another unique feature of Snap is its ability to work with existing SVG." SnapSVG is the successor of Raphael and written by the same author. snapsvg.io/about

[Hamed mayahian]

is there any Ebook or course about snapSVGplugin? i just see some article...

[Nathangrad]

Kopat' Sho Ya Nashel, A few years later... It's Raphael v2.2.1 now