Animierte SVG´s

Animieren von SVGs mit CSS

Nach einer kurzen Google-Recherche wird man feststellen, dass dies auf unterschiedlichste Weisen möglich ist. Vor einigen Jahren gehörte Adobe Flash zu der gängigsten Anwendung, danach folgte Animate CC. Ein anderer Weg ist die Animation mit Javascript oder eben per CSS (Cascading Style Sheets). 
In diesem Beitrag wollen wir uns den letzteren Lösungsansatz einmal genauer ansehen.

Wo liegt der Unterschied zwischen den Lösungen?

Adobe Flash und Animate CC benötigen keine genauere Betrachtung. Diese Anwendungen werden nicht weiter unterstützt und sind kein Lösungsansatz. 
Doch wann solltest du auf Javascript zurückgreifen und warum ist CSS die geeignete Lösung. Der größte Unterschied bezieht sich dabei auf die Verwendung deines animierten SVG. Möchtest du das deine Animation mit der Interaktion des Users geschieht, wirst du dies mit Javascript lösen müssen und CSS nicht der richtige Ansatz. 
Die Animation mit CSS ist der Lösungsansatz, wenn deine Animation losgelöst ist von dem Besucher der Website.

Die Lösung mit CSS

Zunächst benötigen wir eine SVG Datei für die Animation. Die Basis bildet eine Vektorgrafik, welche aus einem Editor der Wahl exportiert wird. 
Vor dem Export der SVG Datei müssen die Pfade der Vektorgrafik gruppiert werden. Diese Gruppierung ist notwendig um sicherzustellen, dass der Form eine CSS Klasse zugewiesen werden kann, um sie später selektieren zu können. Außerdem ist es erforderlich die SVG-Datei auf das Nötigste zu reduzieren. Die Datei darf keine Redundanzen aufweisen oder überflüssige Informationen, wie den HTML DOCTYPE, enthalten. Damit kein unnötiger Aufwand entsteht, kann dies zur Vereinfachung von einem Tool übernommen werden. Hierfür eignet sich ein Tool von GitHub namens SVGO, welches die Datei automatisch optimiert. Ist dies getan, kann mit der Animation begonnen werden.

Im ersten Schritt muss im CSS eine Keyframe-Sequenz gebaut werden. Hierfür benötigt man die ‚animation‘-property in CSS, welche eine Shorthand für mehrere Animations-Eigenschaften ist. Die wichtigsten Eigenschaften hierbei sind der Name (animation-name), die Dauer (animation-duration) und die Zeit-Funktion (animation-timing-function). Sie bestimmen, wie zwischen den Keyframes interpoliert wird.

Per @keyframes ist es nun möglich, die benannte Animation anzusprechen und Keyframes zu spezifizieren. 
Die Spezifikation wird in Prozent-Werten festgelegt. Sie bestimmen zu welchem Zeitpunkt die Animation angesprochen wird. Dementsprechend würde bei einer 3 Sekunden Animation 0 % den Status bei 0 Sekunden beschreiben. 50 % den Status bei 1,5 Sekunden und 100 % den Staus bei 3 Sekunden. 
In diese Keyframe-Selektoren können jetzt CSS-Eigenschaften angepasst werden. Sind die Keyframes spezifiziert und die CSS Eigenschaften richtig gesetzt steht der Animation nichts mehr Weg.

Hilfreiche Links:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
https://github.com/svg/svgo