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

• einzelne Funktionsgraphen nur noch mit Mitteln der Bildbearbeitung bearbeitet werden können
• Objekte, wie die Legende, nicht mehr frei positioniert und bearbeitet werden können
• Text nicht mehr als Textinformation vorhanden und daher nicht maschinell erfassbar oder durchsuchbar ist.

Dazu kommt, dass Vektorgrafiken nicht nur in der Druck-Vorstufe (als PDF oder SVG in PDF oder L^AT_EX) 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:

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

fill: context-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.

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.

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:

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

• CSS-Regeln eines style-Elements mit der ID svgStyles.
• SVG-Definitionen eines defs-Elements mit der ID svgLib.

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

• Die Grafik ist Kind einer figure.
• Die figure besitzt eine figcaption.

Die Bibliothek kann asynchron und deferred eingebunden werden:

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