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.

Icons Demo Performance Demo Performance
1 SVG good Flash good
2×2 SVG good Flash good
5×5 SVG good Flash good
10×10 SVG getting slower Flash good
20×20 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.

Icons Demo Performance Demo Performance
1 SVG flüssig Flash flüssig
2×2 SVG flüssig Flash flüssig
5×5 SVG flüssig Flash flüssig
10×10 SVG ruckelt etwas Flash flüssig
20×20 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.

International Aid Flows (a first look)

I just got a new data set on international aid flows. This is my first look at it, showing the sum of 110,742 donations since 1960. Donors are white, recipients are red. Pretty complex, I think.

Bin vor kurzem an einen neuen Datensatz zu internationalen Hilfsleistungen gekommen. Das hier ist mein erster “Blick” auf die Daten. Man sieht die Summe aller 110.742 Spenden seit 1960. Die Geberländer sind weiß, die Empfänger sind rot. Ziemlich komplex, finde ich..