eleqtriq

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.

Diagram

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.

Trackback

18 Responses to “Canvas vs. SVG vs. Flash”

  1. Pingback by HTML5, Canvas « Utilitypc Tue Sep 7th, 2010, 21:15

    [...] Per chiudere e per chi ama i confronti (non e’ il mio caso ) un link che potrebbe essere molto interessante canvas-svg-flash [...]

  2. Comment by Jackson Dunstan Fri Sep 10th, 2010, 02:48

    Nice test! I tried it out in Firefox on Windows with Flash Player 10.1 and got about 7-10 FPS for canvas, <1 FPS for SVG, and 100+ FPS for Flash. Maybe a WebGL version would help close the gap…

  3. Comment by Dirk Fri Sep 10th, 2010, 17:15

    This is definetely something I want to do next :-)

  4. Comment by josh Fri Mar 11th, 2011, 17:08

    nice, seems to be faster in flash using firefox

  5. Comment by david Mon Mar 14th, 2011, 11:51

    excellent!!!
    Do you know about SVG file to AS3 codegen or parser?
    i need the best rendering, and i begining research about this.

    thanks.

  6. Comment by Dirk Tue Mar 15th, 2011, 00:07

    Hi David, there are a handful, but don’t ask me how good they work,I never tested one.
    http://code.google.com/p/as3svgrendererlib/
    http://code.google.com/p/svgeditor-as3/

    Googles SVGWEB uses Flash as a fallback for older IEs:
    http://code.google.com/p/svgweb/

  7. Comment by david Tue May 3rd, 2011, 20:05

    hi Dirk,
    thanks a lot!!!
    I’m going to try these.
    I hope to contribute to this topic with my research.

  8. Comment by david Sat May 7th, 2011, 10:36

    Awesome tool!!
    CONVERTING SVG TO FIVE3D, FLASH VECTOR GRAPHICS AND HTML5 CANVAS
    http://blog.millermedeiros.com/2010/04/converting-svg-to-five3d-flash-vector-graphics-and-html5-canvas/

  9. Comment by Mo Mon May 9th, 2011, 21:53

    In Chrome I found Canvas was the best, Flash struggled with the particles, but canvas ran smoothly for everything. SVG, not really worth mentioning really.

  10. Comment by zzephyr Tue May 10th, 2011, 19:27

    Same thing here. In Chrome Canvas is the smoothest.

  11. Comment by esimov Tue Jun 7th, 2011, 15:35

    I haven’t seen such a nicely done guilochee. Tom Beddard created one, but he implemented with lines. In my opinion with curves looks better. Congrats!

  12. Comment by Nameless Sat Dec 24th, 2011, 18:44

    Just to report on Opera’s progress, in Opera 11.60, Canvas was also the smoothest.

  13. Comment by anon Tue Jan 24th, 2012, 18:02

    I think the frame counter is faulty…
    It “tells” me like 40fps for flash, around 20 for canvas, but the canvas is definitely more responsive! Moving the slider gives almost instant update, but in flash it laaaaaaaaags.

  14. Comment by Dirk Fri Feb 10th, 2012, 13:15

    Which browser do you use? Flash behaviour is determined by the flash runtime, so it will be consistent across browsers, canvas behaves differently on every browser.

  15. Comment by Gonçalo Wed Feb 15th, 2012, 18:44

    Although flash reports a higher frame rate it’s much slower than canvas. Opera/Ubuntu here.

  16. Comment by Vakaris Wed Feb 29th, 2012, 18:51

    No doubt that canvas wins this contest.
    In both Google Chrome and Firefox (latest versions of both) canvas beats flash.
    Tested on these stats:
    both radius: 150
    particles: max (1400)
    tested by number of rotations slider.
    Around 0 flash hangs up for 1-2 seconds, while canvas just slows down but still works.
    In other areas (not around 0) canvas seems to be more fluent.
    No word about SVG – it brings the browser’s performance to minimum.

  17. Comment by knarF Sat Mar 31st, 2012, 20:55

    Came here by googeling looking for a SVG → SWF (or Swfmill xml) converter, as the Flash IDE/Designer is not available on my platform of choice.

    I’d like to chime in that the canvas performance is waaay better using Google Chrome than Flash. SVG was kinda slow…

    I’ll continue my search, and I’ll look at that links you had posted in one of your comments

  18. Comment by Segomo Wed May 9th, 2012, 00:25

    I second anon’s comment. My experience has been that Chrome and Canvas gave the best overall performance. Again, using only Chrome, SVG was painful and although Flash had a higher frame rate, the initial lag experienced IMHO has Canvas trumping them both. P.S I tried all sliders and multiple combinations.

    Flash (3 files) – Version: 11,2,202,235
    Shockwave Flash 11.2 r202