eleqtriq

Ein Experiment: Canvas vs. SVG vs. Flash

Anlass für dieses Experiment war Jackson Dunstans letzter Javascript-Benchmark. Die Ergebnisse sind fraglos faszinierend, trotzdem war ich auf der Suche nach einer Methode, die die Ergebnisse direkter, „erfahrbarer” veranschaulicht, so das man ein Gefühl für die Geschwindigkeit und Responsivität der Rendermethoden bekommt. Mit der zunehmenden Verbreitung von HTML5 wird sich für uns in Zukunft immer öfter die Frage stellen, welche Methode für die Darstellung komplexer, animierter Grafiken genutzt werden kann, Canvas oder SVG. Und Flash ist schließlich auch noch da...

Das Script zeichnet einen Spirographen in Echtzeit und zwar wahlweise als SVG oder mittels des HTML5 Canvas-Elementes. Dem gegenüber dann auch noch in Flash. Die Eigenschaften des Spirographen können über Slider geregelt werden, während der Veränderung wird die Framerate, die der Browser zum Zeichnen benötigt eingeblendet (hoher Wert = besser). Somit bekommt man zwar keine exakte Benchmark, aber ein durchaus gutes Gefühl für die unterschiedliche Performance der diversen Browser (IE unterstützt erst seit dem gerade erschienenen 9er Beta Canvas und SVG, und noch eine VML-Alternative zu basteln war mir zu mühsam. Zumal ich nicht denke, das VML noch eine große Zukunft vor sich hat. Wenn Ihr also gerade im Explorer unterwegs seid: sorry Explorer Users!)

Hier also Canvas vs. SVG im direkten Vergleich (Vorsicht beim Klick auf „Rendermode SVG", es ist zum in-die-Tischkante-beissen langsam!)

Ein wenig Mathe:

Für alle die noch nicht wissen was ein Spirograph ist: Wikipedia hilft. Es gibt eine parametrische Gleichung um einen Spirographen zu zeichnen deren Herleitung an dieser Stelle nicht unser Thema sein soll. Sie lautet:

x(t)=(R+r)cos(t) + p*cos((R+r)t/r)
y(t)=(R+r)sin(t) + p*sin((R+r)t/r)

Ich habe es mir etwas einfacher gemacht indem ich auf die „polar"-Methode aus dem letzten Script zurückgegriffen habe. Mit Ihr lässt sich bestimmen, wo sich der Mittelpunkt des äußeren Kreises zu einem gegebenen Zeitpunkt auf dem inneren Kreis befindet und anschließend den Zeichenpunkt auf dem äußeren Kreis. Das ganze ist deswegen genau genommen kein wirklicher Spirograph mehr sondern ein Epicycloid.

Diagram

Der Spirograph wird nicht Pixel für Pixel gezeichnet, sondern in größeren Abständen, die Zeichenpunkte sind die kleinen Knöpfe in der Grafik. Die Anzahl der Zeichenpunkte lässt sich mit dem "Partikel" Slider einstellen, je mehr Partikel, desto genauer die Darstellung und desto mehr Rechenoperationen. Habt Ihr das Gefühl, Euer Rechner ist nicht ausgelastet genug, einfach mal die Zahl der Partikel erhöhen. Die Linien zwischen den Partikeln werden mit einer kubischen Bezierkuve genähert. Das ganze ist etwas verwickelt und ich habe nicht wirklich Lust, den Vorgang hier im Detail zu erklären, aber vielleicht hilft die nebenstehende Grafik ja dem einen oder anderen ;)

Werden für den Radius übrigens negative Werte gewählt, entstehen Darstellungsfehler, weil der Haltepunkt der Bezierkurve seitenverkehrt festgelegt wird. Das könnte leicht korrigiert werden, die Darstellungsfehler sind aber extrem sexy, deswegen habe ich beschlossen, den Fehler beizubehalten.

Tools:

Die Slider wurden mit dem jQuery Slider UI-Widget realisiert. Das Rendern der SVG-Grafiken bewerkstelligt das exzellente jQuery SVG Plugin von Keith Wood

Die Ergebnisse:

Klarer Sieger im Vergleich ist Flash, das Canvas souverän aus dem Rennen wirft. Danach kommt Canvas, das SVG immer noch weit abhängt. Der einzige Browser der beim Rendern von SVG eine halbwegs zufriedenstellende Performance erzielen kann ist Webkit in seiner Chrome/Safari Inkarnation. Besonders enttäuscht war ich von der SVG-Performance von Opera 10.5. Nach den letzten Berichten über Operas neue, hochperformante Javascript-Engine waren meine Erwartungen entsprechend hoch, aber Opera konnte sie leider nicht erfüllen. Ähnlich enttäuschend war die Performance des Browsers mit der schnellsten Javascript-Engine - Firefox - der meine Geduld auf eine harte Probe stellte.

Sicherlich werden gewiefte Coder in meinen Sripten einige Performance-Lücken finden. Das es jemand schafft, die SVG-Performance signifikant (im 2-stelligen Prozentbereich) zu steigern glaube ich aber nicht. Natürlich gibt es gewichtige Gründe für den Einsatz von SVG, gerade in Hinblick auf Semantik bietet es eine unvergleichliche Transparenz im Gegensatz zu Canvas, das ja lediglich aus einem Haufen von Pixeln besteht. Trotzdem kann die Konsequenz für uns Designer nur sein, zweimal nachzudenken, ob wir eine Animation mit SVG umsetzen wollen.

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. FlashCanvas vs. SVG vs. Flash

  1. Pingback by HTML5, Canvas « Utilitypc 09/07/2010

    […] 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 09/10/2010

    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 09/10/2010

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

  4. Comment by josh 03/11/2011

    nice, seems to be faster in flash using firefox

  5. Comment by david 03/14/2011

    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 03/15/2011

    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 05/03/2011

    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 05/07/2011

    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 05/09/2011

    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 05/10/2011

    Same thing here. In Chrome Canvas is the smoothest.

  11. Comment by esimov 06/07/2011

    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 12/24/2011

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

  13. Comment by anon 01/24/2012

    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 02/10/2012

    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 02/15/2012

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

  16. Comment by Vakaris 02/29/2012

    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 03/31/2012

    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 05/09/2012

    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