Dezember 2017

Ein Hoch auf SVG-Animationen

Als Designer und Entwickler setzen wir SVG (Scalable Vector Graphics) schon einige Jahre für unsere Kundenprojekte ein. Kleine Dateigrößen, gestochen scharfe Darstellung und responsiv einsetzbar, sind einige der Vorzüge, warum wir SVG liebend gerne nutzen. Aber das sich mit diesem Format auch vielfältige Web-Animationen erstellen lassen, ist bisher weniger bekannt.

Von Markus Remscheid

Den Weihnachtsmann haben wir aus einfachen Grundformen zusammengesetzt und mit Hilfe von Animation zum Leben erweckt.

Auch für uns waren SVG-Animationen noch weitestgehend Neuland. Aber im letzten halben Jahr haben wir viel Forschungsarbeit geleistet und ausprobiert, was sich mit dem Vektorformat so alles anstellen läßt. Was bisher dabei herausgekommen ist, zeigen wir in diesem Artikel.

Aber – und soviel dürfen wir bereits verraten – werden dies nicht die letzten Animationen sein, die wir an dieser Stelle veröffentlichen werden. Tatsächlich wird es schon bald mehr davon zu sehen geben.

Unsere Animation zu Halloween wird auf allen Displays gestochen scharf angezeigt und ist dabei nur 79 KB groß.

Web-Animationen spielen in vielen Marketing-Bereichen ihre Stärken aus. In animierten Infografiken, Erklärfilmen und visualisierten Hilfe-Angeboten entfalten SVG-Animationen ihr wahres Potenzial. Mit bewegten Illustrationen lassen sich auch komplexe Sachzusammenhänge schnell und klar verständlich machen.

Aber es muß nicht unbedingt immer eine ganze Geschichte sein, die erzählt wird. Z.B lassen sich mit Hilfe kleinerer Clips ganz einfach Logos und Piktogramme zum Leben erwecken. Dabei können die Animationen durch eine bestimmte Interaktion ausgelöst werden, wie z.B. Klicken, RollOver oder wenn ein SVG durch scrollen des Seiteninhalts in den sichtbaren Bereich des Browserfensters gerückt wird.

So besteht die Möglichkeit, Animationen dynamisch in den Seitenkontext einzubeziehen und interaktiv zu steuern. Dabei bieten die animierten SVG-Dateien alle Vorzüge ihrer statischen Variante, wie winzige Dateigrößen und responsive Skalierbarkeit.

 

Sie möchten mehr über animierte Illustrationen erfahren oder haben sogar schon einen konkreten Einsatzzweck vor Augen? Schreiben Sie mir einfach oder rufen Sie mich an:
E-Mail: markus.remscheid@h2d2.de
Telefon: 030. 78 89 03 -21