SVG-Animations-Studio
SVG hochladen, Elemente animieren, fertiges SVG mit eingebauter Animation herunterladen.
Lässt die Teile nacheinander erscheinen.
Einfach als .svg speichern oder direkt ins HTML einfügen — die Animation steckt mit drin.
Alles läuft in deinem Browser. Deine Daten verlassen dieses Gerät nicht.
So funktioniert es
- SVG hochladen oder das Beispiel laden.
- Voreinstellung wählen — oder je Element einzeln bestimmen, was passieren soll.
- Dauer und Versatz anpassen, bis der Ablauf sitzt.
- Fertiges SVG herunterladen und direkt einbinden.
Ein Logo, das sich selbst zeichnet, oder ein Diagramm, dessen Linien nacheinander erscheinen — solche Animationen wirken aufwendig, sind technisch aber nur ein paar Zeilen CSS. Dieses Studio nimmt dir das Schreiben ab.
Die Zeichnen-Animation
Der Effekt beruht auf einem Trick: Die Kontur wird in eine gestrichelte Linie verwandelt, deren Strichlänge genau dem Pfad entspricht. Verschiebt man den Strich langsam ins Bild, sieht es aus, als würde die Linie gezeichnet. Das Studio misst dafür jede Pfadlänge einzeln.
Ein Versatz macht den Unterschied
Starten alle Elemente gleichzeitig, wirkt die Animation flach. Ein kleiner Versatz von etwa einer Zehntelsekunde je Element lässt die Grafik dagegen lebendig entstehen.
Häufige Fragen
Muss ich die Animation separat einbinden?
Nein. Das CSS steckt im SVG selbst. Die Datei animiert sich dadurch überall — auch wenn du sie als img einbindest oder als Hintergrundbild verwendest.
Warum funktioniert „Zeichnen" bei manchen Elementen nicht?
Der Effekt braucht eine messbare Pfadlänge und eine sichtbare Kontur. Bei reinen Füllflächen ohne Rand gibt es nichts zu zeichnen — dort wechselt das Studio automatisch auf Einblenden.
Ist das hochgeladene SVG sicher?
Das Studio entfernt vor der Verarbeitung alle Skripte und Ereignis-Attribute aus der Datei. SVG kann JavaScript enthalten, deshalb wird fremder Code grundsätzlich herausgenommen — das gilt auch für den Export.
Kann ich Lottie exportieren?
Noch nicht. Der Export erzeugt SVG mit CSS-Animation, das in jedem Browser ohne zusätzliche Bibliothek läuft. Lottie bräuchte eine Abspielbibliothek von rund 250 KB.
Passende Tools
Alle ToolsWeblabs übernimmt Entwicklung, SEO und Shop-Optimierung — für alles, was über ein Werkzeug hinausgeht.