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.

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.

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.