Wie du animierte Scalable Vector Graphics (SVG) erstellst
Du verfügst über fundierte SVG- und CSS-Kenntnisse. Dir gefallen GIF-Animationen, und du suchst nach einer zeitgemäßen Alternative. Wenn dies zutrifft, dann bist du hier genau richtig. Ich zeige dir Schritt für Schritt, wie du selbst coole SVG-Animationen erstellen kannst.
Lange war ich auf der Suche nach einem adäquaten Ersatz für GIF-Animationen und habe nun eine einfache und effiziente Methode entwickelt, SVG-Animationen zu erstellen, die genauso wie GIF-Animationen funktionieren nur besser.
Im folgenden erkläre ich dir meine Methode Schritt für Schritt.
hej, ich bin Ralf, freiberuflicher Webdesigner und Konzepter. Ich kann dich bei vielen Themen rund um deine Website unterstützen. Nachhaltigkeit und nachhaltiges Webdesign liegen mir besonders am Herzen. Hypes, die gerade im Internet kursieren, nehme ich kritisch unter die Lupe. Mein Motto lautet: "Ich muss nicht jede Welle reiten".
Ich freue mich auf unsere Zusammenarbeit.
1. Das animierte GIF, der Oldie
Lass mich zunächst einige Worte über das GIF-Format verlieren, damit du nachvollziehen kannst, worauf es mir im Detail ankommt.
Das animierte GIF, der Oldie unter den animierten Bildern ist immer noch sehr beliebt. Warum ist das so?
Worin liegen seine Vorteile?
- GIF-Animationen sind universell einsetzbar und können auf nahezu allen gängigen Browsern, Endgeräten und Plattformen angezeigt werden
- Sie funktionieren ähnlich wie ein Daumenkino (kurze filmähnliche Sequenzen), indem Bilder nacheinander abgespielt werden
- Sie lassen sich problemlos teilen und verschicken, weil Bilder und Animation in einer Datei zusammengefasst werden.
GIF-Animationen haben aber auch gravierende Nachteile:
- Sie werden bei Vergrößerung unscharf, weil sie auf Pixeln basieren.
- Wegen der vielen Einzelbilder wächst die Dateigröße schnell an.
Die Dateigröße schlägt vor allem auf mobilen Endgeräten negativ zu Buche. GIF-Animationen werden wegen der längeren Ladezeiten schnell als störend empfunden. Um diesen limitierenden Faktor zu minimieren, müssen GIF-Animationen in mehreren Auflösungen für unterschiedliche Endgeräte bereitgestellt werden. Dies führt zu erheblichem Mehraufwand bei der Erstellung.
2. Die animierte SVG, die Durchstarterin
Webdesigner*innen und Webdesign-Agenturen fokussieren sich vermehrt auf Nachhaltigkeit. Deshalb wiegen die Nachteile animierter GIFs zunehmend schwerer. Hier kommt das SVG-Format ins Spiel, bei dem die Nachteile des GIF-Formats wegfallen und dessen Vorteile erhalten bleiben.
Denn das SVG-Format
- ist vektorbasiert und lässt sich daher beliebig skalieren
- liefert bei optimaler technischer Umsetzung kleine Dateigrößen.
Natürlich sind auch animierte SVG nicht unbegrenzt in ihren Möglichkeiten. Anders als Pixelbilder eignen sich Vektorgrafiken zum Beispiel nicht für fotorealistische Darstellungen bzw. Animationen. Das SVG-Format wird bevorzugt bei Bildern mit illustrativem Charakter eingesetzt. Diesen Umstand solltest du bei der Planung deiner Animationen berücksichtigen.
3. Meine Animationsmethode in "GIF Manier"
Wie du weißt, gibt es viele verschiedene Arten von Animationen. Mit meiner Methode wirst du nicht alle Arten umsetzen können.
Meine Methode eignet sich zum Beispiel nicht für Animationen, bei denen du mittels JavaScript einzelne Knoten eines Pfades manipulieren möchtest. Solche Animationstechniken erfordern fortgeschrittene Programmierkenntnisse und gehen auf Kosten der Kompatibilität. Meine Methode ist bewusst einfach gehalten. Denn du sollst dir keine Gedanken darüber machen müssen, ob deine Animationen auf allen gängigen Browsern, Endgeräten und Plattformen einsetzbar sind.
Du willst nun endlich wissen, welche Animationstechnik bei mir zum Einsatz kommt: Ich verwende ausschließlich CSS.
An Hand der animierten Orange werde ich dir meine Methode im Detail erklären. Die Orange ist dir auf meiner Website ja schon über den Weg gelaufen.
Lade dir dazu orange-animation-beispiel.zip herunter.
Die Animation der Orange ist darauf ausgelegt, nur einmal abzulaufen. Du kannst eine mit CSS realisierte Animation natürlich auch so gestalten, dass sie in Endlosschleife abgespielt wird.
Übrigens, wenn du dir die Animation noch einmal ansehen möchtest, klicke einfach auf die Orange.
Als Vorgeschmack nenne ich dir schon einmal den Unterschied bei den Dateigrößen:
- Orange als SVG (beliebige Größe): ca. 33 KB
- Orange als GIF (498px x 484px): ca. 168 KB
Die GIF-Datei ist 5 Mal so groß wie die SVG-Datei. Du siehst, welches Nachhaltigkeitspotenzial das SVG-Format hat.
Die SVG öffnest und bearbeitest du am besten in Visual Studio Code. Da ich den Quellcode minifiziert habe, zerlegst du die SVG in eine separate Datei mit dem SVG-Code und speicherst diese als SVG. Das gleiche machst du mit dem CSS-Code und speicherst die Datei als CSS. Damit der Code besser lesbar ist, empfehle ich dir, die folgenden Erweiterungen für Visual Studio Code zu installieren:
- jock.svg
- aeschli.vscode-css-formatter
TIPP: Wenn du tiefer in das Thema animierte Scalable Vector Grafics (SVG) eintauchen willst, empfehle ich dir meinen Artikel:
Wie du animierte SVG mit CSS Spezialeffekten erstellst.
Du erfährst, wie du Typografie mit CSS-Spezialeffekten zum Leben erweckst. Meine Anleitung zeigt dir alle notwendigen Schritte, um beeindruckende und stufenlos skalierbare Schriftanimationen zu erstellen.
4. SVG-Code bearbeiten
Bevor du deine eigenen SVG animieren kannst, musst du sie optimieren:
- Enthalten deine SVG Schriftzeichen, musst du diese zuvor in Pfade umwandeln. Sonst kannst du nicht sicherstellen, dass die von dir gewählte Schriftart auf allen Endgeräten auch tatsächlich angezeigt wird. Schriftenarten könnten durch andere ersetzt werden.
- Exportiere alle SVG als Plain SVG. Ich verwende Inkscape dafür. Die SVG-Datei darf keine Ebenen, Gruppen oder sonstigen Ballast enthalten. Für die weitere Bearbeitung sind ausschließlich die einzelnen Pfade notwendig.
- Öffne die SVG in Visual Studio Code und optimiere jeden Pfad einzeln. https://www.svgviewer.dev/ erachte ich als gut geeignet dafür.
- Ergänze bei jedem optimierten Pfad eine ID mit dem Namen für den Pfad und eine Class mit dem Namen für die Farbe. Verwende sprechende Namen. Das erleichtert das spätere Gruppieren.
Sobald du diese Vorbereitungen abgeschlossen hast, beginnt die erste Phase der Animationsarbeit. Du erzeugst zunächst die Einzelbilder, die als Material für die Animation dienen. Dann setzt du die Einzelbilder zusammen, indem du die einzelnen Pfade entsprechend gruppierst. Für jedes Einzelbild schreibst du "<g></g>"; "g" steht für "group". Innerhalb dieser Tags befinden sich alle Pfade, welche ein Einzelbild darstellen. Jede group versiehst du wiederum mit einer ID.
Diese IDs werden für die keyframes im CSS benötigt.
Jeder Pfad innerhalb der g-Tags wird über ein use-Tag eingebunden: <use href="#pathID"/>. Für "pathID" setzt du die zuvor für diesen Pfad vergebene ID ein. Je mehr Pfade dein Einzelbild enthält, desto mehr use-Tags sind notwendig. Hieran erkennst du, dass ein solches Verfahren bei komplexen Bildern an seine Grenzen stößt.
Eine Gruppe mit zwei Pfaden sieht demnach wie folgt aus:
<g id="imgID">
<use href="#pathID"/>
<use href="#pathID"/>
</g>
Wenn du alle Einzelbilder auf diese Weise definiert hast, bist du mit der Arbeit an deinem SVG-Code fertig.
5. CSS-Code schreiben
Jetzt kommt die zweite Phase der Animationsarbeit. Zunächst definierst du im CSS die Farben deiner Pfade nach diesem Muster:
.light-grey { fill: #e9e9e9; }
Wie oben schon erwähnt, helfen dir neben den sprechenden Pfad-IDs auch die Farbnamen dabei, dir die Einzelbilder vorzustellen.
Für eigentliche Animation verwendest du CSS keyframes, indem du die einzelnen Bilder ein- und ausblendest. Das funktioniert am besten mit der CSS-Eigenschaft opacity. Die Dauer (transition-duration) für den Übergang von 0% zu 100% opacity setzt du auf 0s. Damit stellst du sicher, dass kein Fade-Effekt entsteht. Er würde die Bildfolge stören.
Für das erste und das letzte Bild nimmst du abweichende Einstellungen vor. Das erste Bild muss zu Beginn der Animation sofort sichtbar sein und dann ausgeblendet werden. Das letzte Bild wird hingegen eingeblendet, aber nicht mehr ausgeblendet.
Prima, du blendest nun Einzelbilder ein und aus.
Aber wie schaffst du es, dass die Bilder nicht zeitgleich, sondern nacheinander ein- und ausgeblendet werden?
Du verwendest die CSS-Eigenschaft "transition-delay". Wie das im Detail funktioniert, zeige ich dir im Folgenden. In meinem Beispiel wird die Animation wie bereits oben erwähnt nur einmal abgespielt.
Um eine perfekte Bildfolge zu erzielen, muss du das jeweilige Einzelbild zunächst einblenden und zeitversetzt wieder ausblenden. Unmittelbar anschließend folgt das nächste Einzelbild auf die gleiche Art und Weise. Das zeitversetzte Ein- und Ausblenden wird ausschließlich mit der CSS-Eigenschaft "transition-delay" gesteuert. Eine solcher Zyklus sieht wie folgt aus:
#img-2 {
opacity: 0;
animation: img20 0s 1100ms 1 forwards, img21 0s 1200ms 1 forwards;
}
@keyframes img20 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes img21 {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Als Beispiel verwende ich den zweiten Zyklus, weil er analog auf alle Einzelbilder anwendbar ist. Nur das erste und das letzte Bild sind davon ausgenommen. Zwecks Code-Effizienz nutze ich die CSS Kurzschrift (shorthand notation).
Für das Bild "img-2" werden die keyframes mit der CSS-Eigenschaft "animation" über den jeweiligen Namen "img20" sowie "img21" aufgerufen und ausgeführt. Bild-ID und animation-name sollen einerseits als Einheit erkennbar und andererseits eindeutig sein. Deshalb steht beim ersten animation-name eine zusätzliche "0" und beim zweiten eine zusätzliche "1", der Bindestrich fällt jeweils weg.
Das transition-delay kannst du sowohl in Sekunden (s) als auch in Millisekunden (ms) angeben. Beim Beispiel oben beträgt die Anzeigedauer pro Bild jeweils 100ms. Die Animation startet übrigens nicht sofort, sondern erst nach 1,1 Sekunden. Dann läuft sie in 100ms-Intervallen durch. Das transition-delay erhöht sich dementsprechend um jeweils 100ms.
Der Wert "forwards" für die CSS-Eigenschaft "animation-fill-mode" sorgt dafür, dass der Endzustand eines Animationszyklus erhalten bleibt.
Da die verwendeten CSS-Eigenschaften auch ohne Browserpräfix von über 95% der Browser unterstützt werden, habe ich darauf verzichtet, die Browserpräfix anzugeben. Wenn du weniger verbreitete CSS-Eigenschaften verwenden möchtest, solltest du gegebenenfalls Browserpräfixe hinzufügen.
Um den Informationsgehalt deiner SVG-Animation zugänglich zu machen, solltest du im img-Tag das title- sowie das alt-Attribut und gegebenenfalls in der SVG-Datei das title- sowie das desc-Tag verwenden (siehe: https://www.mediaevent.de/tutorial/svg.html).
6. Animierte SVG minifizieren
Wenn du dein CSS fertiggestellt hast, folgt der letzte Schritt: die Minifizierung deines Codes.
Inkscape und andere Software zur Erstellung von SVG erzeugen auch im Export-Modus "Plain SVG" viel überflüssigen Code. Um die Dateigröße deiner SVG möglichst stark zu verringern, empfehle ich dir, die SVG manuell zu minifizieren.
Bisher konnte ich kein Tool finden, das in der Lage ist, sowohl den SVG- als auch den CSS-Code in einem Arbeitsgang korrekt zu minifizieren. Deshalb minifizierst du beides am besten getrennt und führst die Teile dann in einer Datei zusammen. Anschließend speicherst du diese als SVG.
Die bereits genannten Visual Studio Code Erweiterungen "jock.svg" und "aeschli.vscode-css-formatter" kannst du auch für das Minifizieren verwenden.
Super, jetzt hast du es geschafft. Deine animierte SVG ist nun universell einsetzbar und kann auf nahezu allen gängigen Browsern, Endgeräten und Plattformen angezeigt werden. Hinzu kommt, dass deine SVG in allen Skalierungen gestochen scharf ist und nur ein Fünftel des Speicherplatzes belegt, den ein entsprechendes GIF benötigt. So macht Nachhaltigkeit Spaß.
7. Wie es weitergehen kann
Ich freue mich, wenn dir meine Anleitung geholfen hat und hoffe, dass du damit eigene coole SVG-Animationen erstellen kannst. Vielleicht hast du selbst Ideen und Anregungen zu diesem Thema, die du mir mitteilen möchtest. Vielleicht habe ich bei meiner Anleitung auch etwas Wichtiges vergessen.
Du willst mehr über animierte SVG erfahren und erweiterte Animationstechniken kennenlernen? Dann empfehle ich dir meinen Blog-Artikel: Wie du animierte SVG mit CSS Spezialeffekten erstellst.
Dir ist das alles zu aufwändig, und du hast keine Zeit und Lust, selbst animierte SVG zu erstellen. Kein Problem, ich unterstütze dich gerne. Wie wäre es mit einem persönlichen Gespräch?
