Inkscape animiert nicht selbst – eine Zeitleiste wie in einem Animationsprogramm gibt es nicht. Das heißt aber nicht, dass Ihre Zeichnungen unbewegt bleiben müssen: SVG ist ein Format, das sich hervorragend animieren lässt. Sie brauchen nur den passenden Weg – über eine Erweiterung, ein eigenständiges Programm oder ein paar Zeilen Code.
Erweiterungen für Inkscape
- JessyInk – seit Version 0.91 mitgeliefert. Damit bauen Sie animierte Präsentationen, die direkt im Browser laufen: Das nötige JavaScript wird in die SVG-Datei eingebettet, eine zusätzliche Software braucht niemand. Sie finden es unter Erweiterungen → JessyInk.
- Sozi – erzeugt Präsentationen mit Zoom-, Verschiebe- und Drehfahrten durch eine große Zeichnung. Sozi begann als Inkscape-Erweiterung und ist heute ein eigenständiges, flexibleres Programm; nehmen Sie die eigenständige Version.
- XIA – macht aus einer SVG-Zeichnung interaktive HTML5-Inhalte mit Klick-, Hover- und Zoom-Effekten, etwa für den Unterricht. Quellcode und Beispiele im Projekt-Repository.
Eigenständige Programme
- GIMP – der freie Bildeditor baut aus mehreren aus Inkscape exportierten PNG-Bildern ein animiertes GIF. Der einfachste Weg, wenn das Ergebnis überall funktionieren soll (Dokumentation).
- Synfig Studio – freie 2D-Animationssoftware, die SVG-Dateien importiert. Sie arbeitet mit Keyframes und rechnet die Zwischenbilder selbst aus (synfig.org).
- Tupi – freie 2D-Animation mit Vektor- und Rasterunterstützung, angenehm einsteigerfreundlich und mit vielen Beispielen (maefloresta.com).
Animation per Code
Wer die volle Kontrolle will, animiert das SVG direkt. Die drei üblichen Wege, von einfach nach mächtig:
SMIL
SMIL animiert direkt in der SVG-Datei, ohne jede externe Datei – die Grafik bleibt eine einzige, in sich geschlossene Datei. Alle aktuellen Browser unterstützen es. Ein guter Einstieg ist A Guide to SVG Animations (SMIL) von Sara Soueidan.
CSS
Ist das SVG in die Seite eingebettet, animieren Sie seine Elemente wie jedes andere HTML-Element – mit transition und @keyframes. Das ist der bequemste Weg für Hover-Effekte, pulsierende Icons und einfache Bewegungen.
JavaScript
Die größte Flexibilität, aber auch der größte Aufwand: Per JavaScript lässt sich jeder Aspekt einer SVG-Grafik zur Laufzeit verändern und auf Nutzereingaben reagieren. Bibliotheken wie Snap.svg, D3.js und SVG.js nehmen Ihnen dabei viel Arbeit ab.
Welcher Weg passt zu Ihnen?
- Präsentation → JessyInk oder Sozi.
- Kurzes GIF für soziale Netzwerke → GIMP.
- Richtiger Zeichentrick → Synfig oder Tupi.
- Animiertes Icon auf einer Website → CSS, sonst SMIL.
- Interaktive Grafik → JavaScript.
In allen Fällen bleibt Inkscape das Werkzeug, mit dem die Zeichnung entsteht – sauber aufgebaut, mit sinnvoll benannten Ebenen und Gruppen. Genau das macht die Animation hinterher einfach.