Animated SVG or canvas?

Question

I was wondering if it is better to make an animation like this in canvas or svg (performance wise)? I am rewriting it now in jquery, but somewhere I read that the canvas is redrawn every time it changes.

Answer 1

For these "simple" animations and scene graphs, it really doesn't matter if you use SVG or Canvas. Both should work fine without performance issues.

However, it would be easier to create animations with SVG compared to Canvas. In Canvas, you have to redraw the whole scene, and in SVG you can just create a ring once, and then define the transformation (rotation) on it.

For SVG check d3.js or raphael and for canvas you can check processingjs , fabric.js , kinetic.js or paper.js