Startseite » Insight » SVG-Animationen: Ein Dateiformat erobert die Webentwicklung

SVG-Animationen: Ein Dateiformat erobert die Webentwicklung

autor: Aleksandar Mijatovic

25.11.2021

Teilen auf :

Bei SVG-Animationen handelt es sich um vektorbasierte Animationen, die in Bilder, Infografiken oder Werbebanner eingebunden sind. Als Baustein einer modernen UX beleben sie deine Website und sorgen für ein attraktives Erscheinungsbild.

Als sie die neue Website abends ihrer Freundin zeigen will, öffnet diese sie allerdings mit ihrem Smartphone und erhält prompt eine Warnnachricht: Die Website verschlingt zu viel Energie. Aufgrund der schlechten Performance und der langen Ladezeiten von Bildern und Animationen schließt Janinas Freundin die Website gleich wieder.

Am Morgen danach ruft Janina beim Animationsstudio an und erhält den Tipp, es mal mit SVG zu probieren. Ja klar, gerne, aber was ist das?

Was sind SVG-Animationen?

SVG-Animationen sind eine gute Möglichkeit, farbige 2D-Webanimationen zu erstellen, die bei jeder Bildschirmauflösung und Bildschirmgröße gestochen scharf aussehen. Die SVG-Animation ist extrem gut skalierbar und verliert auf Bildschirmen, egal in welcher Größe, nichts an Bildqualität. Der Grund: Sie basiert nicht auf Pixel, sondern auf Vektoren.
Während Pixelanimationen, wenn man die Anzahl der Pixel verändert, um die Animation leicht und schlank zu halten, in der Qualität nachlassen, bleiben SVG-Animationen qualitativ konstant. Dabei spielt es keine Rolle, ob sie auf einem Smartphone, Tablet oder auf einem XXL-Monitor zu sehen sind, denn SVG-Animationen sehen in ihrer Bildwiedergabe deviceübergreifend gleich gut aus.

Schlank und agil: SVG-Animationen

Animation

Wofür eignen sich SVG-Animationen?

Die schlanken und agilen SVG-Animationen sind echte kleine Wunderdateien und eignen sich für viele Formen der Webanimation. Doch wo lassen sie denn nun wirklich richtig gut einsetzen?

Logoanimationen

Logos dürfen nach unserer Ansicht nur noch SVG-Dateien sein. Keine PNGs. Keine JPEGs. Und warum nicht das Logo in ein interaktives Element verwandeln: Farbwechsel beim Scrollen oder als Ladeanimation in die Website einbinden? Der Möglichkeiten gibt es viele; wir erarbeiten gern etwas Passendes für dich.

Infografiken

Infografiken lassen auf leicht verständliche Weise das Geschehen überblicken. So veranschaulichen sie selbst komplexe Strukturen, Funktionen, Eigenschaften oder Zusammenhänge. Mit HTML und JavaScript können diese SVG-Grafiken zusätzliche Fähigkeiten für Erklärfunktionen erhalten. Sie eignen sich damit hervorragend für den Website-Content oder für die Hero Area deiner Startseite.

Micro-Animationen

Die meisten Micro-Animationen sind heute noch GIF-Animationen. Doch nicht mehr lange, denn trotz ihrer erstaunlich kleinen Dateigröße gewinnt die SVG-Animation auf jedem Device durch Brillanz und Schärfe.

Werbebanner

Werbebanner sollten aufgrund der Performance und des Trafficverbrauchs einer stark besuchten Seite nie groß sein. Deshalb werden SVG-animierte Werbebanner inzwischen wesentlich stärker von Mediaagenturen angefragt und eingesetzt.

Eigenschaften der SVG-Animation

SVG-Animationen besitzen eine kleine Dateigröße im XML-Format und werden somit auch besonders gut komprimiert.

Auch das Erstellen von Animationen für das sogenannte Retina-Display wird einfacher, weil keine extra Inhalte erstellt werden müssen. Skalierbare Vektorgrafiken (SVG) werden mit CSS formatiert und animiert. Ihre Wiedergabe wird von allen Webbrowsern unterstützt.

SVG mag für einige Designer vielleicht noch etwas technisch anmuten, es existieren aber bereits heute zahlreiche inspirierende Bibliotheken.

Wie erstellt man SVG-Animationen?

Nun ist klar, warum wir SVG-Animationen absolut empfehlen, aber wie werden sie produziert und welche Schritte und Tools sind dafür nötig?

Wir planen und produzieren SVG-Dateien zunächst mit vektorbasierten Grafikprogrammen wie etwa Illustrator, Photoshop, GIMP oder InDesign. Unsere Illustratoren arbeiten ihre SVG-Entwürfe mit Adobe Illustrator aus.
Die Animationen werden anschließend entweder mit kostenlosen Apps oder für weiterreichende, professionelle Anwendungen z. B. mit After Effects erstellt. Unsere Motion Designer nutzen ausschließlich After Effects.
Um die Animationen dann wiederum mit interaktiven Funktionen wie bspw. Farbveränderungen beim Scrollen oder den Wechsel von Elementen auszustatten, verwenden unsere Frontend-Entwickler JavaScript und CSS.

Die schlanke SVG-Animation wirkt nie überladen

Das Zeitalter der SVG-Animationen ist längst angebrochen. Ihre beschriebenen technischen Vorteile machen sie unverzichtbar.

Zudem ist es wirklich schwer, sich ihrer aufgeräumten Designästhetik zu entziehen. Sie passen eben sehr gut zum angesagten Minimalismus und Flat-Design im Weblayout. Außerdem sind sie mit dem Auge schnell zu erfassen und wirken nie überladen.

Wenn ein Motion Designer sich geschickt anstellt, erreicht er mit 2,5D sogar simuliertes 3D – und das ist sicherlich erst der Anfang …

Melde dich bei uns

Du planst, deine UX zu verbessern oder deiner Website mit einigen Webanimationen eine Portion Freshness mitzugeben? Unser Animationsstudio hilft dir dabei.

So schnell erreichst du uns

Tel. +49 30 4004 5775

E-Mail

Hier findest du themenverwandte Artikel:

Insights