Vector Animation Performance: Flash vs. SVG

To make it clear: I love SVG. It’s an open standard for description of vector graphics, it renders well in most common browsers, and it provides a huge amount of features. So, what’s wrong with SVG? There’s one little thing: SVG is slow, very slow! Here’s a little example. I took one icon of the wonderful noun project collection, extracted the SVG path and displayed it using the RaphaelJS framework. Now I added a bit of animation that periodically scales the icon, like this:

var paper = Raphael("canvas", "800", "600");
var icon = paper.path(svgPath);
icon.attr({ fill: '#000', stroke: 'none' });

timer = window.setInterval(animate, 1000/30);

function animate() {
	t += .1;
	icon.scale((Math.sin(t)+1)*.5 + 1);
}

Here are the links to the demos.

IconsDemoPerformanceDemoPerformance

1
SVG
good
Flash
good

2x2
SVG
good
Flash
good

5x5
SVG
good
Flash
good

10x10
SVG
getting slower
Flash
good

20x20
SVG
nearly slow motion
Flash
high CPU load, but still fine
The result: we should forget about SVG animation by now. SVG animations are a little slower than flash. Update: Erik Dahlstrom told me about the fact that RaphaelJS re-draws the SVG paths on every scale() call. I now implemented the scaling using svg transformations.Um eins gleich vorweg zu nehmen: Ich liebe SVG. Ein offener Standard zur Beschreibung von Vektorgrafiken, darstellbar in so gut wie allen gängigen Browsern, mit einer beinahe endlosen Vielfalt an Möglichkeiten. Was will man noch mehr? Naja, eine Sache fällt mir da ein. Es wäre toll, wenn SVG auch noch einigermaßen fix gerendert würde. Hier mal ein kleines Beispiel. Ich habe ein Icon vom wundervollen Nounproject genommen, den SVG-Pfad daraus kopiert und mit Hilfe des RaphaelJS Frameworks eingebunden. Dazu kommt jetzt noch eine einfache Animation, die das Icon größer und kleiner werden lässt:

var paper = Raphael("canvas", "800", "600");
var icon = paper.path(svgPath);
icon.attr({ fill: '#000', stroke: 'none' });

timer = window.setInterval(animate, 1000/30);

function animate() {
	t += .1;
	var s = (Math.sin(t)+1)*.5 + 1;
	icon.node.setAttribute("transform", "translate(55,34) scale("+s+") translate(-55,-34)");
}

Hier sind die Links zu den Demos.

IconsDemoPerformanceDemoPerformance

1
SVG
flüssig
Flash
flüssig

2x2
SVG
flüssig
Flash
flüssig

5x5
SVG
flüssig
Flash
flüssig

10x10
SVG
ruckelt etwas
Flash
flüssig

20x20
SVG
Zeitlupe
Flash
CPU unter Volllast, aber läuft noch
Das simple Ergebnis: Animation von Vektorgrafiken kann man mit SVG derzeit einfach vergessen schon begrenzt für Visualisierungen verwenden. Trotzdem noch etwas langsamer als Flash. Update: Erik Dahlstrom hat mich freundlicherweise darauf hingewiesen, dass RaphaelJS die SVG-Pfade bei jedem scale() Aufruf neu zeichnet. Habe die Skalierung jetzt über SVG-Transformationen gelöst.

# Comments

Gregor (Mar 01, 2011)

Glaube ich hatte es fairerweise auch mit Chrome getestet. Firefox und IE sind dann noch langsamer. Grad mal die 20x20 SVG Demo im IPad Safari getestet, bleibt bei Zeitlupe. Echt schade das SVG so langsam ist… Wie cool wäre es, wenn Apple wenigsten solange den Flashplayer zulassen würde, bis es gleichsetze Alternativen gibt. so ist es einfach nur ein Rückschritt…

Dave Gööck (Mar 01, 2011)

Interessanter Benchmark: Welchen Browser und was für einen Rechner hast du dafür genommen? Ich habe beides mal auf meinem Rechner im Chrome laufen lassen und es lief flüssig.

Grüße, Dave

Patrick Martin (Aug 04, 2012)

You should revisit this comparison using Chrome. I typically use Mozilla but tested performance using this site (recognizing that this is Google’s benchmarks).

http://v8.googlecode.com/svn/data/benchmarks/v7/run.html

Firefox on my laptop (i7, 8 core) scores:

Score: 7622
Richards: 10209
DeltaBlue: 9779
Crypto: 15312
RayTrace: 3493
EarleyBoyer: 8671
RegExp: 1493
Splay: 11409
NavierStokes: 14442

Chrome Scores:

Score: 12196
Richards: 13457
DeltaBlue: 17396
Crypto: 16130
RayTrace: 18703
EarleyBoyer: 26692
RegExp: 3565
Splay: 4360
NavierStokes: 16702

So if you need the performance, try your app out in Chrome. Some of the most phenomenal benchmark differences are around graphical rendering.

SVG performance will only get better. Flash, I think will be a fond memory eventually.

  • Pat