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 += 0.1;
	icon.scale((Math.sin(t) + 1) * 0.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 += 0.1;
	var s = (Math.sin(t) + 1) * 0.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