Neuigkeiten von trion.
Immer gut informiert.

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.

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.

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:

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:

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.

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