Hallo,

Vorteile gegenüber was? SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format. Das führt uns zu den Unterschieden zwischen Vektorgrafiken und Rastergrafiken.

Sie decken zwei unterschiedliche Einsatzgebiete ab. Mit Überschneidungen natürlich, weil sich jede SVG-Grafik auch rastern lässt und Rastergrafiken einbinden kann. SVG sollte man einsetzen, wenn sich die meisten Bildelemente mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit oder eine Dynamik gewünscht ist. Letzteres ist in Zeiten von unterschiedlichen Device-Pixel-Ratios so gut wie immer der Fall.

Darunter fallen eine große Zahl von Grafiken im Web: Icons, Logos, Illustrationen/Animationen, manche Zeichnungen, komplexe UI-Elemente, Karten, Diagramme/Visualisierungen usw. Für die wurden bisher Rastergrafiken, Flash-Plugins, HTML5-Canvas, Icon-Fonts usw. verwendet. SVG ersetzt diese Anwendungen zunehmend, aus praktischen Gründen aber nicht alle.

SVG-Code lässt sich direkt in HTML5 notieren, als externe Ressource mit img oder object einbetten oder auch als CSS-background-image laden. Besonders im Bereich der Datenvisualisierung und interaktive Grafiken werden SVG-Grafiken nahtlos in HTML-Dokumente eingebunden und über JavaScript programmiert. D3 als verbreitete JavaScript-Bibliothek wurde schon genannt. D3 ist in der Grundidee keine SVG-Bibliothek, sondern bildet ganz allgemein JavaScript-Objekte auf DOM-Elemente ab. Es bietet sich an, damit SVG zu erzeugen.

Beispiele für SVG-basierte Datenvisualisierung, an denen ich mitgearbeitet habe:
http://data.oecd.org/
http://data.oecd.org/germany.htm
http://data.oecd.org/unemp/unemployment-rates.htm
http://viz.ged-project.de/

Mathias