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    What the trade-offs are between the two 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

User · Answer

Since it s not mentioned here yet  You should also take a look at Dojox drawing  which also provides good SVG drawing capabilities  It has a pretty impressive set of features  I m just starting a project with it  but it seems to me that it s far superior  at least in terms of features  to Raphael and JQuerySVG    This presentation convinced me to use it instead of Raphael JQuerySVG  http   www slideshare net elazutkin dojo-gfx-svg-in-the-real-world-2114082  Reference  http   dojotoolkit org reference-guide dojox index html  Reference on Dojocampus  http   docs dojocampus org dojox drawing  Download Dojo  including Dojox   http   dojotoolkit org download

User · Answer

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

User · Answer

For those who don t care about IE6 IE7  the same guy who wrote Raphael built an svg engine specifically for modern browsers  Snap svg    they have a really nice site with good docs  http   snapsvg io  snap svg couldn t be easier to use right out of the box and can manipulate update existing SVGs or generate new ones  You can read this stuff on the snap io about page but here s a quick run down   Cons   To make use of snap s features you must forgo on support for older browsers  Raphael supports browsers like IE6 IE7  snap features are only supported by IE9 and up  Safari  Chrome  Firefox  and Opera    Pros   Implements the full features of SVG like masking  clipping  patterns  full gradients  groups  and more  Ability to work with existing SVGs  content does not have to be generated with Snap for it to work with Snap  allowing you to create the content with any common design tools  Full animation support using a straightforward  easy-to-implement JavaScript API Works with strings of SVGs  for example  SVG files loaded via Ajax  without having to actually render them first  similar to a resource container or sprite sheet    check it out if you re interested  http   snapsvg io

User · Answer

I prefer using RaphaelJS because it has great cross-browser abilities  However  some SVG  amp   VML effects can t be achieved with RaphaelJS  complex gradients       Google has also developped a library of its own to enable SVG support in IE  http   svgweb googlecode com files svgweb-2009-08-20-B zip

User · Answer

If you don t need VML and IE8 support then use Canvas  PaperJS for example   Look at latest IE10 demos for Windows 7  They have amazing animations in Canvas  SVG is not capable to do anything close to them   Overall Canvas is available at all mobile browsers  SVG is not working at early versions of Android 2 0- 2 3  as I know   Yes  Canvas is not scalable  but it so fast that you can redraw the whole canvas faster then browser capable to scroll view port    From my perspective Microsoft s optimizations provides means to use Canvas as regular GDI engine and implement graphics applications like we do them for Windows now

User · Answer

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    http   code google com p svgweb

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

As a Javascript beginner  I found Rapahel samples not so easy  I recommend  http   cancerbero mbarreneche com raphaeltut  which is a real Step by step tutorial

User · Answer

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

User · Answer

Another svg javascript library you might want to look at is d3 js  http   d3js org

User · Answer

I think it is not totally unrelated but did you consider canvas  something like Process JS can make it simpler

User · Answer

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

[javascript] jQuery SVG vs. Raphael

Examples related to javascript

Examples related to jquery

Examples related to svg

Examples related to raphael