Canvas versus SVG animations (effects[filters] and performance)

views:

answers:

+1 Q:

Canvas versus SVG animations (effects[filters] and performance)

I am developing an application that should run equally smoothly on a web browser (IE support completely optional) and on iPhones and have tested various libraries for days, including: jQuery SVG, CAKE (Canvas Animation Kit Experiment), Burst Engine, Processing.js and Raphael, and have yet to find the right one for this experiment.

The input is optional - whether an SVG or a PNG rendered from the vector, the only two requirements for the animation library are to be able to animate (rotate) the image, and gradually apply a blur filter or a "trails"-like effect.

Should I go for SVG or Canvas, performance- and the forementioned effectswise?

Previously the project was in Flash, but regarding the trends and lack of iPhone support, I decided to switch to a more progressive software.

Here you can compare filter performance svg vs canvas yourself. Another example shows how to do an svg 3d lighting effect vs canvas 3d lighting effect

There are many nice demos over at chromeexperiments showing both canvas and svg. And there's svg-wow.org which does the same more or less.

Erik Dahlström 2010-09-30 21:48:07

Thank you, it seems that Canvas might be more performant in this experiment. Although I haven't been able to find any examples or references to animating the blur filter (both adding and reducing the amount of blur) - do you happen to know of any? Since I've used Flash in the previous implementation of the project, the SVG seems more intuituve though, in AS the blur and rotation were animation attributes of objects on different layers - can you give me some examples on how to implement the same functionality using Canvas? (multiple objects independently animating with rotation and filters)

laVie 2010-10-02 17:47:23

Here's an example of animating the blur: http://svg-wow.org/blog/2009/10/04/fast-blur/. That particular version requires SMIL animation support, which isn't yet in all browsers (I'd recommend running it in Opera). However, it's possible to change the 'stdDeviation' attribute using javascript, and that should work just fine in the browsers that support svg filters.

Erik Dahlström 2010-10-03 10:14:13

Also I'm surprised about the performance, since the svg version is much faster in every instance I've tried (basically c++ code vs javascript). Tried a few different browsers?

Erik Dahlström 2010-10-03 10:23:56

ansaurus

tags:

views:

answers:

Canvas versus SVG animations (effects[filters] and performance)

related questions