Jeder kennt sie, jeder liebt sie! Die bunten animierten Gifs, die sich so im Newsfeed der sozialen Plattformen tummeln. Für diesen Einsatz sind sie auch durchaus zweckmäßig. Im Zeitalter von „mobile first“ bzw. Responsive Design, ist es allerdings sinnvoller zu SVGs zu greifen.
Warum?
Gifs haben leider so manchen Nachteil. Man kann sie weder verlustfrei skalieren, noch verfügen sie über einen Alpha-Kanal für Transparenz. Dazu kommt je länger die Animation des Gifs dauert, desto höher ist auch die Dateigröße, um nur einige Beispiele zu nennen.
Will man also Infografiken, Webseitenicons, oder einfach nur das Logo durch kleine Animationen zum absoluten Blickfang machen, sollte man animierte SVGs verwenden, da die Vektorgrafiken beliebig auf jede Größe skaliert werden können, ohne Qualität einzubüßen. Somit ist es möglich, z.B. ein Icon verlustfrei und gestochen scharf auf allen gängigen Gerätescreens mit beliebiger Auflösung auszuspielen und das ohne große Datenmengen zu produzieren.
Ein weitere Vorteil, SVGs werden anders als Gifs nicht durch Abspielen einzelner Bilder hintereinander erstellt, sondern werden mittels CSS, Javascript oder SMIL (basiert auf XML) animiert. Dadurch bewegen sich diese deutlich flüssiger, zudem kann man bei einem Farbwechsel das gesamte RGB-Farbspektrum nutzen.
Was tut man nun aber, wenn man kein Web-Developer ist, und über keine Kenntnisse in CSS, Javascript oder SMIL verfügt? Auch dafür gibt es natürlich bereits die passende Lösung online. Eine sehr gute Alternative zum Selbstprogrammieren, ist das Tool Svgator (https://www.svgator.com/). Hier hat man die Möglichkeit sein statisches SVG hochzuladen und direkt im Browser zu animieren. Anschließend kann es über einen Klick exportiert und individuell eingesetzt werden. Dieses Tool ist eine besonders simple Lösung, um schnell und unkompliziert kleine Animationen zu erstellen. Mittels „Animators“ wie Position, Rotate, Scale und Opacity können die einzelnen Elemente des hochgeladenen SVGs animiert werden. Darüber hinaus kann man die einzelnen Paths also Pfade ebenfalls animieren, leider ist dieses Widget kostenpflichtig. Farbwechsel können leider noch gar nicht vorgenommen werden. Aber es lassen sich auch mit den derzeit zur Verfügung gestellten Mitteln schöne Ergebnisse erzielen!
Wer allerdings ein umfangreicheres Angebot an Animationsmöglichkeiten haben möchte, muss dann doch auf kostenpflichtige Dienste wie Adobe Animate CC zurückgreifen, allerdings sind in der Kombination mit Adobe Illustrator CC der Kreativität diesbezüglich keine Grenzen gesetzt.