Logoanimation mit Javascript und SVG

Friedrich Siever

Animationen im Webdesign

Moderne Websites nutzen Animationen in unterschiedlichem Umfang. Auch für das Jahr 2019 ist die Animation als Stilmittel wieder voll im Webdesign-Trend. Ob als Flatanimation, Microanimation, Scrollanimation oder Textanimation. Im richtigen Umfang verwendet, bereichern Animationen jede Webseite, weil Sie die Aufmerksamkeit lenken, Wartezeiten überbrücken oder einfach interessant anzuschauen sind. Glücklicherweise bieten moderne Browser immer bessere Möglichkeiten für Animationen.

Demo Animation mit JavaScript und SVG

Damit das nicht zu theoretisch wird, haben wir eine kleine Animation mit JavaScript und SVG zur Veranschaulichung vorbeireitet und diese um eine Animation mit einzelnen Buchstaben erweitert.

Zur Live SVG Demo gelangt Ihr, wenn Ihr die GIF Vorschau hier unten anklickt.

Javascript und SVG Vorschau GIF

JavaScript und SVG sind für Animationen eine ausgezeichnete Technologieplattform. Das coole an der Kombination ist, dass wir uns mit dem Einsatz dieser Technologien die Vorteile und Besonderheiten von SVG voll umfänglich zu nutze machen können. Beispielsweise hat die Vorschau auf dieser Seite als „animierte Pixelgrafik“ eine stolze Dateigröße von 390 KB, während das SVG auf der Demoseite weniger als 10KB wiegt. Und das obwohl die SVG Animation weit runder läuft und auch noch eine viel bessere Auflösung hat.

Vorteile SVG im Schnellüberblick

  • kleine Dateigrößen, Performancevorteile
  • Flexibilität (Veränderbarkeit mittels CSS und JS)
  • Skalierbarkeit ohne Qualitätsverlust
  • Browserkompatibilität.

Hierbei sticht für Animationen neben der Skalierbarkeit vor allem die Flexibilität heraus. Wie auch das HTML werden Scalierbare Vektor Grafiken (SVG) als Bestandteil des Document Object Model (DOM) dargestellt. Daher können sie auf Websites gerade als Inline SVGs hervorragend via JavaScript manipuliert werden. Hierbei erweisen sich moderne JavaScript Bibliotheken mit unterschiedlichen Schwerpunkten aus Sicht der Webdesigner als sehr nutzlich.

Nützliche JavaScript Bibliotheken für SVG-Animationen