Neuigkeiten von trion.
Immer gut informiert.

SVG-Komponenten mit Angular

Angular

Das Angular-CLI richtet mit Angular 8 einen erweiterten Support für SVG-Grafiken ein. Dies wollen wir zum Anlass nehmen, den SVG-Support von Angular einmal genauer zu beleuchten.

SVG-Grafiken sind Vektorgrafiken und basieren auf dem XML-Format und sind gut standardisiert. Dadurch ist es möglich, dass Designer eine Grafik mit ihren Werkzeugen (z.B. Inkscape oder Illustrator) erstellen können, um diese dann als Standard-SVG zu exportieren.
Von den Browsern können die SVG-Grafiken dann wiederum z.B. als Teil einer Webseite gerendert werden. Der Sprachumfang von SVG umfasst Elemente zum Erzeugen geometrischer Objekte, wie zum Beispiel Rechtecke, Kreise oder auch Pfade. Um komplexe Grafiken zu erzeugen, müssen diese durch Komposition der Primitiven zusammengesetzt werden. Folgende SVG-Grafik ist etwa aus zwei Pfaden zusammengestellt, wobei der farbige Path basierend auf Usereingaben von Angular dynamisch bewegt werden kann.

Angular-SVG-Komponente
Figure 1. Dynamische, per Angular gesteuerte SVG-Komponente

Um Platz zu sparen, und da es normalerweise von Maschinen geschrieben wird, ist die Syntax für das Erzeugen speziell von Pfad-Grafiken sehr knapp und Abstrakt gehalten. Pfad-Grafiken werden durch das SVG-Element <path> erzeugt, die Eigentliche Logik zum Erzeugen des Pfades steckt jedoch im d-Attribut des Pfades (d ist die Pfad-Definition). Das Erzeugen von Pfad-Grafiken kann man sich vorstellen wie das Malen mit einem Stift:
Zuerst “bewegt” man den Stift an seine Startposition. Dies wird durch den Pfad-Parameter “M” (move), gefolgt von den Start-Koordinaten angegeben. Von dieser Position aus kann dan mit dem Stift eine Linie gezogen werden, indem “L” als Pfad-Parameter verwendet wird, gefolgt von den End-Koordinaten der Linie. Es gibt auch komplexere Pfad-Elemente wie etwa Ellipsen-Bögen und Bezier-Kurven.

Pfad-Syntax zum Erzeugen eines Dreiecks
<path d="M10 10 L90 90 L90 10 L10 10" fill="green" stroke="blue"/>

Außerdem können zum Erzeugen komplexerer Grafiken mehrere einzelne SVG-Elemente zu Gruppen zusammengefasst werden. Effekte wie Weichzeichnung oder Schatten können durch Filter erreicht werden, wobei es auch hier wieder möglich ist mehrere Filter aufeinander gegenseitig aufeinander anzuwenden und zu kombinieren. Um Bewegungen bzw. Dynamik in den Grafiken abzubilden, können auch Animationen auf die Grafiken angewendet werden.

Für Interaktivität zwischen JavaScript bzw. Angular und den SVG-Grafiken ist es wichtig zu wissen, dass jedes Element einer SVG-Grafik - genau wie jedes normale HTML-Element - eine eigene Repräsentation als Node im JavaScript-DOM mit eigenen Attributen und Properties besitzt.

Mit der Angular-Binding-Syntax kann man in erster Linie Daten an Properties eines DOM-Elementes binden, beispielsweise als ID eines Elementes oder das Value-Property von Input-Elementen:

Setzen der Element-ID und des Value-Property per Angular-Binding
<input type="text" [id]="customer?.id" [value]="customer?.name">

SVG-Elemente besitzten im Wesentlichen die "grundlegenden" Properties eines DOM-Nodes. Alle grafischen Eigenschaften, die die SVG-Grafik ausmachen, liegen jedoch nur als SVG-Attribute vor.
Um an die Attribute eines DOM-Elementes (und damit eben auch eines SVG-Elements) zu binden, bietet Angular ein Binding mit Hilfe des attr-Keywords an:

Angular Attribute-Binding bei SVG-Elementen.
<svg height="100px" version="1.1" width="100px" xmlns="http://www.w3.org/2000/svg">
  <path [attr.fill]="'gray'"
        stroke="none"
        [attr.d]="getPath(maxValue)"/>
</svg>

Der Wertebereicht der Skala erstreckt sich in diesem Beispiel von 0 bis 100. Das Path-Element für den Hintergrund besteht an sich aus dem inneren und dem äußeren Bogensegment ("A" für "Arch"), an beiden Enden verbunden durch je eine gerade Linie. Der farbliche "Füllstandsanzeiger" ist ein weiterer Path, welcher im Wesentlichen gleich dem ersten aufgebaut ist, siehe auch folgende Grafik.

SVG-Template
Figure 2. Data-Binding von zwei SVG-Pfaden

Damit der Anzeiger sich dynamisch bewegen kann, müssen die Start- und Endpunkte der Bögen und Linien des Pfades bei jeder Nutzereingabe neu berechnet werden. Im produktiven Einsatz ist es durchaus sinnvoll, diese Berechnung in eine Pipe auszulagern. Das Property value kann der Komponente von aussen mitgegeben werden und symbolisiert den momentanen Zustand der farblichen Anzeige. Mit Angular 8 kann diese SVG-Datei nun einfach als Template für die Komponente angegeben werden, siehe folgende Grafik

SVG-Template Einbindung
Figure 3. Einbindung der SVG-Datei als Angular-Template

Fazit

Mit SVG als Dateiformat ergeben sich Möglichkeiten zur direkten Zusammenarbeit von Designern und Webentwicklern. Mit Angular lassen sich SVG-Komponenten genauso verwenden, wie herkömmliche HTML-Elemente und damit Anwendungen um sehr individuelle und ansprechende Elemente erweitern.

Der Quellcode zur Beispielkomponente kann hier heruntergeladen werden:




Zu den Themen Angular, Architektur von SPA Anwendungen und TypeScript bieten wir sowohl Beratung, Entwicklungsunterstützung als auch passende Schulungen an.

Auch für Ihren individuellen Bedarf können wir Workshops und Schulungen anbieten. Sprechen Sie uns gerne an.

Feedback oder Fragen zu einem Artikel - per Twitter @triondevelop oder E-Mail freuen wir uns auf eine Kontaktaufnahme!

Los geht's!

Bitte teilen Sie uns mit, wie wir Sie am besten erreichen können.