Diagramme mit SVG

Diagramme als Vektorgrafik

Für viele Anwendungsfälle ist es sinnvoll Diagramme und Graphen als Vektorgrafiken aufzubereiten, so dass eine Grafikdatei auf verschiedenen Ausgabemedien verwendet werden kann: in Webseiten, Präsentationen am Bildschirm oder via Beamer auf einer Leinwand, im Druck von Seiten oder Postern, … Raster- (Pixel-) Grafiken hingegen müssten für jede mögliche Auflösung erzeugt (gerendert) werden – und könnten anschließend nicht mehr so einfach weiterver- und -bearbeitet werden: Die Grafik besteht nur noch aus einem Bild, alle Bestandteile des Diagramms sind nicht mehr als eigene Objekte enthalten. Das bedeutet, dass

Dazu kommt, dass Vektorgrafiken nicht nur in der Druck-Vorstufe (als PDF oder SVG in PDF oder LATEX) hervorragende Ergebnisse und Qualität liefern, sondern als SVG auch direkt in HTML notiert (eingebettet) werden können – man also nur ein Dokument benötigt.

SVG marker für Diagramme

Wie eingangs motiviert ist SVG prädestiniert um Diagramme in HTML darzustellen. marker sind dabei sehr nützliche Elemente, die als Pfeile und Datenpunkte verwendet werden können. Wie in der Kolumne Pfeile in SVG beschrieben ist, müssen dabei refX (und analog refY) sowie die Orientierung entsprechend verwendet werden um den Markern (Pfeilen) den richtigen (eigenen) Koordinatenursprung zu geben:

marker Referenz-Punkte Orientierung
(Achsen-) Pfeile ref?=0 oder ref?=VIEWBOX MAX, so dass die Pfeilspitze am Anfang/dem Ende der Achse beginn/endet auto
Datenpunkte mittig innerhalb der viewBox keine explizite Angabe

Die marker-Farbe und Füllung kann explizit oder in Abhängigkeit der Linie/des Pfades definiert werden:

fillcontext-stroke

Während Programme wie Inkscape diese Eigenschaft unterstützen, ist dies noch nicht bei allen Browsern der Fall, weshalb aktuell noch verschieden farbige marker für verschieden farbige Linien definiert werden müssen.

Gibt man dem/den innerhalb des markers definierten SVG-Objekten (gegebenenfalls als Gruppe) ebenfalls eine ID, kann das marker-Symbol außerdem einfach für eine Legende verwendet werden. In der folgenden Abbildung haben die Symbole (Rechtecke, Kreise und Pfade) eine separate ID, die in der Legende mit use referenziert und platziert werden.

Einfaches Linien- und Punktdiagramm y x Legende Linien-Diagramm rechteckig Kreuze Rauten
Vollständiges, einfaches Linien- und Punkte-Diagramm mit Markern und Legende.

Die Abbildung enthält weiterhin CSS-Regeln, die auch auf die folgenden Diagramme angewendet werden. Die definierten Marker (und Objekte) stehen durch ihre dokument-weit gültige und eindeutige ID darüber hinaus in allen Diagrammen zur Verfügung. Dies ist beispielsweise beim Datenexport zu berücksichtigen.

Spiegeln für karthesische Koordinaten

Der Ursprung des SVG-Koordinatensystems befindet sich links oben, d. h. die y-Achse des Karthesischen Koordinatensystems verläuft von oben nach unten. Die Koordinaten der Datenpunkte müssen dementsprechend gespiegelt werden – oder man spiegelt die komplette Zeichenfläche des/der Graphen um einen Koordinaten-Ursprung links unten verwenden zu können!

Die in den folgenden Diagrammen verwendeten marker werden dabei per ID aus dem obigen Diagramm wiederverwendet.

Liniendiagramm „richtig herum“ y x
Liniendiagramm, dessen Zeichenfläche mittels der Transformation scale(1, -1) gespiegelt und dann um die Größe des Darstellung der Koordinatenachsen (20 Pixel in x-Richtung und 135 Pixel in y-Richtung) verschoben worden ist.

Die polyline points sind im gewohnten karthesischen Koordinatensystem notiert, während bei anderen Objekten umgedacht werden muss:

<polyline points="50,50 100,75 150,25 200,50" style="marker:url(#mr3)"/>

Das Rechteck hat seine y-Koordinate unten und wird nach oben gezeichnet:

<rect x="50" y="20" width="50" height="30" style="stroke:none;fill:#fc6"/>

Wird die viewBox passend zur Darstellung der Koordinatenachsen verschoben – hier um 20 Pixel nach links und 5 Pixel nach oben, kann die der Spiegelung folgende Translation rein auf die y-Achse beschränkt werden um das gleiche Diagramm zu erzeugen:

Liniendiagramm „richtig herum“ y x
Mit der passenden viewBox="-20 -5 300 155" reduziert sich die Translation des Zeichenbereichs auf translate(0, 130). Die Datenpunkte des/der Graphen werden analog zur vorherigen Abbildung verwendet.

Diagramme Speichern

SVGs, die in HTML-Dokumente eingebettet werden, können nicht ohne Weiteres einzeln gespeichert. Selbst wenn man den SVG-Knoten aus dem Dokument extrahiert, können an anderer Stelle definierte CSS-Regeln und SVG-Definitionen benötigt werden. Aufbauend auf einem SELFHTML-Blog-Artikel lassen sich die genannten Zusätze beim Export berücksichtigen und in die serialisierte SVG einfügen. Die hier verwendete JavaScript-Bibliothek export.js basiert auf dem SELFHTML-Artikel und fügt der Grafik hinzu

Die Bibliothek fügt dann für jede SVG der mit den folgenden Kriterien einen Download-Link hinzu:

Die Bibliothek kann asynchron und deferred eingebunden werden:

<script type="text/javascript" src="export.js" async defer></script>