SVG Animationen
SVG Animationen

SVG Animationen - Möglichkeiten und Grundlagen

Zunächst muss ich dem ambitionierten Leser dieser Seiten reinen Wein einschenken: die auf dieser Website beschriebenen Vektorgrafikprogramme unterstützen die Erstellung von animierten SVG-Grafiken nicht. Wie in vielen anderen Fällen der Gestaltung von Webinhalten ist Handarbeit angesagt. Das muss nicht unbedingt ein Nachteil sein, denn auf diesem Weg hat man die volle Kontrolle über den erstellten Code.

Möglichkeiten der Animation

Es gibt mehrere Varianten, die Elemente einer SVG-Datei zu animieren:

  • SMIL - diese Abkürzung steht für Synchronized Multimedia Integration Language
  • mit CSS3 - bekanntlich enthält der CSS3-Standard eine Reihe von Anweisungen, mit denen sich HTML-Objekte animieren lassen, das geht genauso gut mit SVG-Objekten
  • JavaScript - auch mit JavaScript kann man auf die Objekte einer SVG-Datei bzw. auf SVG-Elemente in einer HTML-Datei zugreifen

Eine gewisse Sonderrolle nehmen JavaScript-Bibliotheken wie Raphaël ein, denn sie greifen nicht auf bestehenden SVG-Code zu, sondern erzeugen diesen zunächst und bieten gleichzeitig die Möglichkeit, die SVG-Objekte zu animieren. Dieser Themenkomplex wird umfassend im Abschnitt SVG mit Raphaël behandelt.