What are the pros and cons of HTML5 Canvas vs. SVG + Raphael.js?

Question

I just started a project using the Canvas. But one of the things I need is to keep track of movable, clickable boxes as in this example : http://raphaeljs.com/graffle.html so I'm wondering if Raphael-js + SVG would be better.

Which would you use? And why?

Solution 1

This answer is copied from my answer to another question. But the OP then changed the question and therefore this answer became less relevant to it. IMHO it is more relevant to this question so here goes:

---

Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.

With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.

With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.

Sometimes their use case overlaps. For example a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.

Solution 2

A couple things to decide - do you want your stuff to work in mobile browsers? SVG (Raphael) isn't going to work on android (don't know about iphone). Conversely, if you want something that will work with old versions of Internet Explorer, canvas may not work (not sure if ExCanvas supports IE6), but SVG does to some extent (Raphael supports IE6).

Also, are you just doing animations/drawing, or are you doing a full blown app that might need things like buttons, sliders, tab containers, lists, grids, etc.

If you are creating a complete app and you want it to work on mobile stuff too, you might check out the dojo toolkit, specifically dojox.gfx and other graphical dojox libraries: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/

dojox.gfx is a vector graphics library that supports several backends: canvas, SVG, even silverlight. Here's an article comparing it with raphael: http://www.lrbabe.com/?p=217

Check out also cake.js for a stand-alone scene graph library for the canvas: http://code.google.com/p/cakejs/ And also check out processingjs.

Comments

[Erik Dahlström]

Morphing svg paths is quite possible to do, e.g circle -> blue square (though you'll have represent the shapes as path elements). Be aware that svg also has filters, adding a blur is not much harder than adding an attribute and a filter definition in the svg file.

[slebetman]

@Erik: I'm not talking about morphing. I'm talking about shapes blending into each other by blurring. For example, a picture (not animation, static picture) of a red circle blending into a blue square will have the color purple at the point they blend and the edges organically blur into each other. This is simple in Photoshop and the smudge tool but is harder to do in Illustrator.

[slebetman]

@Erik: Also, it is very hard to change the degree of blurring depending on the thickness of the line by simply using filters. May be possible using multiple filters but is certainly non-trivial.

[interstar]

Ah ... that's very useful to know : Android not supporting SVG / Raphael.

[Dmitry Baranovskiy]

ExCanvas supports IE6, but beware, it doesn’t cover all Canvas functionality. Android will support SVG in the future release. iPhone/iPad supports SVG IE doesn’t support SVG until version 9.

[Dmitry Baranovskiy]

Also the article you pointing to is more than one year old, therefore outdated.

[Nathan Hinchey]

Update, because I just found this answer: All browsers after 2011 fully support both SVG and Canvas. IE8 and below supports neither.