SVG-Animationen: Ein Dateiformat
erobert die Webentwicklung

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.

Janina Olof hat endlich ihre neue Produktwebsite gelauncht: dynamisch und interaktiv. Besonders stolz ist Janina auf mehrere, einzigartige Webanimationen, die sie dort zur besseren Visualisierung der Inhalte eingebunden hat.

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?

Beitragsbild zum Insight SVG-Animationen erobern als Dateiformat das Web und lassen sich als Illustration von Motion Designern leicht erstellen

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.

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.

Content-Kreation Veranschaulichung Infografiken

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.

GIF-Animation Micro-Animation Wearables Smartphones

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.

Performance Dateigröße Trafficverbrauch Ladeanimation

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 …

Aleksandar Mijatovic Portrait Schwarz/Weiss

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

Aleksandar Mijatovic

So schnell erreichst du uns