The power of illustration in motion

Neue Möglichkeiten für Animationen mit dem SVG-Format

Denkanstoß #1

Webanimation in Zeichentrickqualität am Beispiel unseres Projekts „Die Honigbienen“

In Verbindung mit Animationen wird deutlich welche Potentiale das SVG-Format ermöglicht.

Das Format SVG

Dank des SVG-Formats lassen sich Vektorillustrationen in Webseiten integrieren. SVG bedeutet „scalable vector graphic“. Das Vektorformat bietet gegenüber Pixelgrafiken den Vorteil, dass weniger Bildinformationen gespeichert werden müssen. Vektorgrafiken sind daher meist deutlich kleiner als Pixelgrafiken. Im performancegetriebenen Mobilzeitalter ein klarer Vorteil.

Jetzt wird's spannend

Spannend wird es jetzt, wenn wir diese Vektorillustrationen mit Bewegung versehen – also animieren. Schon von jeher war das Vektorformat die Grundlage für Animationen im Web. Wir erinnern uns an das berühmt-berüchtigte Flash. Der Nachteil: Bisher war für die Interpretation der Animation im Browser immer ein eigener Player notwendig.

Mit dem SVG-Format und Dank WebGL ist dies nun nicht mehr erforderlich. Und genau da beginnt jetzt der Spaß und es eröffnen sich neue Möglichkeiten.

Eine konkrete Anwendung

In unserem Projekt „Die Honigbienen“ für die Website „Planet Schule“ des SWR haben wir die Möglichkeiten des SVG-Formats ausgelotet. Das Ergebnis hat uns selbst begeistert. Mit den SVG-Animationen entstanden beinahe Disney-mäßige Zeichentricksequenzen.

Und so sind die Animationen entstanden

Die Vorteile

Besser als 4K

SVG-Grafiken können ohne Qualitätsverlust beliebig groß (oder klein) skaliert werden. Die Animationen sehen aus wie ein Videoclip, bleiben aber immer gestochen scharf, egal bei welcher Auflösung.

Performant auf Mobilgeräten

Die äußerst geringe Datengröße der Animationen, kommt vor allem der mobilen Nutzung zugutekommt.

Anwendungsfälle

Für wen ist die Methode geeignet bzw. wann ist sie sinnvoll

  • Videos mit Interaktionen z. B. Hotspots oder Entscheidungspunkte für unterschiedliche Storyverläufe.
  • Anwendungen wo bestimmte Player wie z. B. Youtube gesperrt sind.
  • Animierte Sequenzen statt Bildern im Content
  • Animierte Schaubilder zum Beispiel zur schematischen Darstellung von Abläufen und Prozessen

Projektbeispiel anschauen

SVG Animation in Action

Ein bewegender Beitrag von: Dietmar

Über den Autoren

Dietmar ist Creative Director Konzept und seit über 15 Jahren Netzbeweger. Als ausgebildeter Werber (FH Pforzheim), mit Agenturerfahrung und vielen Projekten für renommierten Kunden, kennt Dietmar die Welt der Marken und des Online-Marketing in vielen Facetten.

Der nächste Schritt

Nutze die Vorteile von SVG-Animationen

Wenn du Interesse an illustrativen Lösungen hast, sprich uns einfach an. Wir erstellen gerne erste Ideen und Scribbles.

Let’s do it.

Alwin Roppert

Inhaber & Geschäftsführer
Telefon +49 721 667789 20

Kontakt per E-Mail