News for hackers. Stuff that matters.
Re:Here's why Raphael.js and SVG totally rock. by axod on Thursday April 22, 2010 @04:35PM (#1286367)
Assuming you don't care about IE, what's the Pros/Cons for SVG vs Canvas? Canvas seems to be pretty nice from what I've used it for so far...
Re:Here's why Raphael.js and SVG totally rock. by steadicat on Thursday April 22, 2010 @05:02PM (#1286443)
Canvas is significantly faster for animation: http://www.themaninblue.com/writing/perspective/2010/03/22/

It is also more likely to get faster in the future, as browsers might implement GPU acceleration for it. I wouldn't hold my breath waiting for GPU acceleration for SVG, since SVG is not as easily mapped to drawing primitives, like Canvas is.

Re:Here's why Raphael.js and SVG totally rock. by chairface on Friday April 23, 2010 @10:58AM (#1288215)
There's already an implementation of hardware accelerated SVG, in IE9: http://blogs.msdn.com/ie/archive/2010/04/07/a-closer-look-at...

There's also a toggle in Firefox's about:config that turns on hardware acceleration on Windows.

Re:Here's why Raphael.js and SVG totally rock. by nimrody on Friday April 23, 2010 @03:21AM (#1287517)
What about printing? Does canvas maintain resolution independence like SVG? ... I.e., can you print your beautifully drawn graphs and expect to get quality output?
Re:Here's why Raphael.js and SVG totally rock. by arethuza on Thursday April 22, 2010 @05:15PM (#1286482)
What makes you say that? SVG is pretty much standard drawing primitives wrapped in a XML-based syntax.
Re:Here's why Raphael.js and SVG totally rock. by steadicat on Thursday April 22, 2010 @05:40PM (#1286552)
Not exactly. SVG syntax describes a scene, it does not draw on screen directly.

When you animate an SVG image, you update the DOM. The browser then needs to parse the DOM (attributes) again, then clear the screen and draw each element again. This is a lot more work than just mapping the drawing primitives of Canvas to the lower-level GPU functions.

Check this presentation for the two technologies compared in terms of how much work is required for animation: http://www.slideshare.net/madrobby/i-cant-believe-its-not-fl...

Re:Here's why Raphael.js and SVG totally rock. by arethuza on Thursday April 22, 2010 @06:21PM (#1286663)
Ah OK - good point

I guess it's good to have the choice though - for some things Canvas looks a good choice, for others SVG is better.

Re:Here's why Raphael.js and SVG totally rock. by arethuza on Thursday April 22, 2010 @05:23PM (#1286508)
Canvas is pixel oriented whereas with SVG you have a hierarchical document structure to work with.

So if you want to do an online image editor I'd probably go with canvas. For something that needs multiple objects with their own individual event handling - SVG looks a lot easier to me.

Re:Here's why Raphael.js and SVG totally rock. by steadicat on Thursday April 22, 2010 @05:44PM (#1286561)
SVG is easier out of the box, but you can also use a "scene graph" JavaScript library to create an object abstraction on top of Canvas. In my experience managing the scene graph in JS turns out to be much faster than letting the browser handle it with SVG.
Re:Here's why Raphael.js and SVG totally rock. by windsurfer on Thursday April 22, 2010 @04:42PM (#1286393)
SVG is better supported and has some content creation tools already such as Illustrator and Inkscape. Also: SVG stuff can be used on IE (aparently...) via a flash conversion tool.
Re:Here's why Raphael.js and SVG totally rock. by llimllib on Thursday April 22, 2010 @05:03PM (#1286446)
canvas is simpler, with more complete support, and tends to be faster. SVG is a huge spec, while canvas' can be read in a sitting.