Nachdem in diesem Beitrag zu SVG Animationen die Grundlagen von SVG Animationen erläutert wurden, geht es in diesem Beitrag darum, wie SVG Animationen mit Angular umgesetzt werden können.

Dieser zweiteilige Beitrag behandelt Animationen von SVG Komponenten im Kontext einer Angular Anwendung. Die Grundlagen von SVG Komponenten in Angular wurden in diesem Artikel erläutert, in diesem Artikel werden die Grundlagen für Animationen vermittelt.

Vorweg ein paar Worte zum Thema SVG Elementen: Ebenso wie normale HTML-Elemente können SVG-Elemente in Angular Komponenten eingebunden werden. Wenn komplexere SVG-Grafiken per Angular anzubinden sind, bietet es sich an, die Grafik als eigene Angular-Komponente auszulegen, in der die SVG-Datei als templateUrl referenziert wird. Damit müssen die einzelnen SVG-Elemente nicht in eine andere Template-Datei hineinkopiert werden. Dadurch wird es später gegebenenfalls einfacher, die SVG-Grafik zu ersetzen, etwa wenn vom Grafiker eine aktualisierte Version geliefert wird. Der geschickte Umgang mit dem Thema Binding bleibt einem anderen Beitrag vorbehalten.
Soll eine SVG-Grafik lediglich wie ein normales Bild angezeigt werden, dass heißt sie kommt ohne dynamisches Binding aus, so kann die SVG-Grafik auch einfach per <img>-Tag eingebunden werden.