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.

Trackback

18 Kommentare zu „Canvas vs. SVG vs. Flash“

  1. Pingback by HTML5, Canvas « Utilitypc Di. 7. Sep 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. Kommentar by Jackson Dunstan Fr. 10. Sep 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. Kommentar by Dirk Fr. 10. Sep 2010, 17:15

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

  4. Kommentar by josh Fr. 11. Mär 2011, 17:08

    nice, seems to be faster in flash using firefox

  5. Kommentar by david Mo. 14. Mär 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. Kommentar by Dirk Di. 15. Mär 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. Kommentar by david Di. 3. Mai 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. Kommentar by david Sa. 7. Mai 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. Kommentar by Mo Mo. 9. Mai 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. Kommentar by zzephyr Di. 10. Mai 2011, 19:27

    Same thing here. In Chrome Canvas is the smoothest.

  11. Kommentar by esimov Di. 7. Jun 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. Kommentar by Nameless Sa. 24. Dez 2011, 18:44

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

  13. Kommentar by anon Di. 24. Jan 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. Kommentar by Dirk Fr. 10. Feb 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. Kommentar by Gonçalo Mi. 15. Feb 2012, 18:44

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

  16. Kommentar by Vakaris Mi. 29. Feb 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. Kommentar by knarF Sa. 31. Mär 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. Kommentar by Segomo Mi. 9. Mai 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