An experiment: Canvas vs. SVG vs. Flash
This experiment was inspired by Jackson Dunstan's latest Javascrip/AS3-Benchmark. The results are quite fascinating, anyway I was looking for a method that allowed me a more direct "experience", so I could develop a better feeling for the speed and responsiveness of the different render-methods. HTML5 is gaining momentum and in the near future we will increasingly often face the decision which method to choose for complex animations, canvas or svg. And then there is also flash...
The script draws a spirograph in real-time, alternatively as SVG or HTML5 canvas-element. Additionally I created a Flash-Demo for comparison. The properties of the spirograph can be adjusted with the sliders below, the current frame-rate is shown during the adjustment. This doesn't give us an exact benchmark but a good impression for the performance of the different browsers (svg and canvas is supported in IE only in its newest incarnation, the brand new IE 9.0, and I was too lazy to build a VML-version. Anyway I do not expect that there is a big future for VML. If you are visiting this site in Explorer: sorry for the inconvenience, Explorer-users!)
So here is the direct comparison of Canvas vs. SVG vs. Flash (Attention: "Rendermode SVG" can bring your machine to its knees!)
Some Math:
More info about spirographs: Wikipedia helps. A spirograph is represented by this parametrical equitation (the derivation is not subject of this article):
x(t)=(R+r)cos(t) + p*cos((R+r)t/r)
y(t)=(R+r)sin(t) + p*sin((R+r)t/r)
I must admit that I choose to make things a little bit easier for me. Therefore the form you will see is not a spirograph but an epicycloid. It still looks nice, but I got away with only two sine/cosine calculations.
The spirograph will not be drawn pixel by pixel but we will leave gaps between the joints (joints are the little buttons in the graphic). The number of joints can be adjusted with the slider labelled "Particles", the more particles, the more exact the illustration and the more computations. The lines between the joints are approximated with a cubic beziere-curve. This part is a little bit tricky and I'm not really in the mood for explanations, maybe the diagram to the left can help a little ;)
By the way: choosing negative values for the radius will produce an erroneous graphic because the control-point of the curve is inverted. This could be corrected easily but it looks quite sexy, so in the end I choose to leave it this way...
Tools:
I built the sliders with the jQuery Slider UI-Widget. SVG-rendering is accomplished with Keith Wood's excellent jQuery SVG Plugin.
The results:
The clear winner is flash that eats canvas and svg for lunch. Canvas still achieves superior frame-rates against SVG. I achieved the best results for svg in Chrome and Safari, both webkit and was disappointed in particular by the performance of Opera 10.5. With all the cudos about Operas new, fast Javascript-engine I had high expectations. The browser with the fastest javascript-engine - Firefox produced similar disappointing results for SVG.
I'm sure that a skilled coder will find some performance-gaps in my scripts. But I'm doubtful that it's possible to leverage performance significantly. I wouldn't abandon svg for animation all together, as it is the better option against canvas from a semantic point of view. But for us designers the consequence must be to think twice when using svg for animations.