Visualisierung von geometrischen Formen mit Hilfe von SVG und HTML5

von Matthias Joachimsthaler

In diesem Blogpost möchte ich anhand eines Beispiels die Verwendung von SVG mit Hilfe der Bibliothek Snap.svg [1] veranschaulichen. Als Beispiel soll die Erstellung eines Straßenzuges dienen, bei der die einzelnen Teilabschnitte der Straße eines gesamten Straßenzuges als Zeichnung erstellt werden soll. Die Zeichnung soll auch bei starker Vergrößerung keine Qualitätsverluste aufweisen.

Zunächst stellt sich die Frage warum bei diesem Beispiel nicht das mit HTML 5 ebenfalls eingeführte Canvas verwendet wird. Um dies zu beantworten wird zunächst eine kleine Gegenüberstellung von Canvas zu SVG gegeben.

Canvas vs. SVG

Canvas wurde im Zuge von HTML5 eingeführt und ist wie der Name schon vermuten lässt eine „Leinwand“ mit der man über Javascript dynamische Bitmap-Grafiken zeichnen kann. Da Canvas pixelbasiert ist, sind die entstehenden Grafiken nicht auflösungsunabhängig. Beim skalieren der Grafik werden Unschärfen an den Rändern sichtbar. Die Zeichnungen lassen sich einfach als PNG, BMP oder JPEG abspeichern. Jedoch können einzelne Objekte der gesamten Zeichnung nicht nachträglich bearbeiten werden. So funktioniert die Canvasoberfläche im Prinzip wie das bekannte Zeichenprogramm Paint von Microsoft.
SVG ist Vektorgrafikbasiert und somit auflösungsunabhängig. Aufgrund der Vektorgrafik können auch Fließkommazahlen dargestellt werden. Hingegen können bei Canvas nur ganzzahlige Pixelwerte verwendet werden. Auch bei starkem Hinein-zoomen in die Zeichnungen „verschwimmen“ keine Linien und Kanten. Einzelne Objekte können nachträglich noch bearbeitet werden. Um SVG einfach zu verwenden wird die Bibliothek Snap.svg verwendet. Diese bietet die Möglichkeit mit SVGs ähnlich zu manipulieren wie für das DOM mit JQuery möglich ist. Snap.svg wird von Adobe unterstützt und ist eine Open Source Library. Die Bibliothek benötigt mindestens IE9, Firefox, Chrome oder Opera.

Beispiel für Verwendung von SVG

Nun zum oben schon angesprochenen Beispiel. Der Einfachheit halber wird der Straßenzug aus einzelnen Teilabschnitten zusammengesetzt, wobei jeder Teilabschnitt durch ein Viereck repräsentiert wird. Auf das Erstellen von Kurven wird in diesem Blog Post nicht eingegangen. Die Abmessungen der einzelnen Teilstrecken könnten z.B. aus einer Datenbank geladen werden, um das Beispiel einfach zu halten wird an dieser Stelle darauf verzichtet. Nachfolgend ist in Abb. 2 die Eingabemaske für das Zeichentool zu sehen. In diesem Fall besteht das der gesamte Straßenzug aus 4 Teilstrecken. Eine Erweiterung ist durch den Button „Teilstrecke hinzufügen“ möglich.

Eine weitere Anforderung ist das dynamische Erweitern der Zeichenfläche, dies wird benötigt falls die aktuelle Zeichenfläche zu klein für den gesamten Straßenzug sein sollte. In der Zeichnung werden desweiteren die Abmessungen der Teilabschnitte benötigt. In diesem Beispiel wird zudem noch die jeweilige Fläche der Teilabschnitte berechnet. Siehe Abbildung 1: Beispiel für einen Straßenzug.
Nach einbinden der Bibliothek Snap.svg kann eine Zeichenfläche einfach erstellt werden.

Die Zeichenfläche kann nun über Javascript manipuliert werden. Um einen Teilabschnitt zu erstellen wird aus der Bibliothek die Funktion path(„String“) benötigt. Hier werden die Eckpunkte angegeben und mit Linien zu einem vollständigen Pfad erstellt. Dabei bedeuten „M“ move, „L“ line und „Z“ close Path. Attribute wie Linienfarbe, Linienstärke und Füllung können festgelegt werden.

Hierdurch können einzelnen Teilabschnitte nacheinander erstellt werden. Die Bemaßung kann mit der Funktion text(x, y, String) einfach erstellt werden. Wobei (x,y) die Position des Textes angibt. Die Ausrichtung kann durch die Funktion rotate(a, x, y) festgelegt werden. 
Eine weitere Funktion, die das kleine Beispiel besitzen soll, ist das dynamische Erweitern der Zeichenfläche. Hierzu muss lediglich das Attribut „width“ der Zeichenfläche verändert werden. Diese kann über jQuery einfach angesprochen werden. Die Objekte die bereits erstellt wurden, werden hierdurch nicht beeinflusst.

Fazit

Durch das Beispiel des Straßenzuges konnte gezeigt werden, dass unter Verwendung der Open Source Bibliothek Snap.svg vektorbasierte Zeichnungen einfach erstellt werden können. Hier wurden nur 3 Funktionen der sehr umfangreichen Bibliothek verwendet. Die Objekte lassen sich einfach über Javascript erstellen. Die Zeichnungen sind auflösungsunabhängig und somit auf jedem Bildschirm unter Verwendung moderner Browser „scharf“ darstellbar und skalierbar. Die Verwendung von SVG ermöglicht es ebenfalls nachträglich einzelne Objekte zu manipulieren oder auch Informationen aus der Zeichnung zu extrahieren, was einen deutlichen Vorteil gegenüber pixelbasierten Lösungen bietet.

Links

[1] http://snapsvg.io/

Kategorien: HTML5IT-Consulting

Zurück