Lohnt sich dein eigenes SVGator?
Browserbasierter Zeitleisteneditor zum Animieren von SVG-Dateien und zum Export als CSS, SMIL oder JavaScript.
Hier gibt es weder ein Netzwerk noch einen Daten-Burggraben: Es ist ein Editor für Einzelanwender, der deine eigene SVG in eine animierte SVG verwandelt. Ein Agent kann das Grundgerüst durchaus in einer Sitzung bauen: die Datei parsen, die Elemente auflisten, transform und opacity auf einer Zeitleiste mit Keyframes versehen und CSS-Keyframes innerhalb der SVG ausgeben. Was das Wochenende und noch mehr verschlingt, kommt nach transform: Pfad-Morphing, das schrittweise Zeichnen von Konturen, Bewegung entlang eines Pfads, ein echter Bézier-Easing-Editor, transform-Ursprünge für Gruppen und eine Export-Pipeline, die in Safari nicht kaputtgeht. Der Kernablauf bleibt beim DIY erhalten; die letzten 20 Prozent der Funktionsliste machen das eigentliche Produkt aus. Baue es selbst, wenn du zwei oder drei Eigenschaften animierst und den Rest von Hand abstimmst. Kaufe es, wenn du mit illustrierten Mikroanimationen deinen Lebensunterhalt verdienst.
EN → DERecherche automatisch aus dem Englischen übersetzt. Original-Prompt auf Englisch beibehalten.
Build a local, single-page SVG animation editor. No accounts, no backend, no telemetry, no cloud.
Stack, no substitutions: Vite + React + TypeScript, Tailwind for styling, Zustand for state. Everything runs in the browser. Persist projects to IndexedDB via idb-keyval.
Core behavior:
1. Drag-and-drop or file-pick an .svg file. Parse it into the DOM, do not rasterize it. Auto-assign stable ids to any element that lacks one.
2. Left panel: a tree of the SVG's elements (g, path, rect, circle, text, etc). Clicking a node selects it and outlines it in the canvas.
3. Center: the live SVG, scaled to fit, with a zoom control and a checkerboard background.
4. Bottom: a timeline. Fixed duration set by the user (default 3s), a scrubber, play/pause/loop, and one row per animated element.
5. For a selected element, the right panel exposes animatable properties: translateX, translateY, scale, rotate, opacity. Setting a value at the current playhead position creates a keyframe diamond on that element's timeline row. Keyframes can be dragged horizontally and deleted.
6. Per-keyframe easing: linear, ease-in, ease-out, ease-in-out, plus a cubic-bezier text input. Store easing on the outgoing segment.
7. Preview must be exact: apply interpolated transforms live while scrubbing, using the same math the export uses so the preview never lies.
Export:
- One button: "Export animated SVG". Produce a single self-contained .svg file with a <style> block of @keyframes generated from the keyframes, one animation per animated element, plus transform-box: fill-box and an explicit transform-origin on every animated element so browsers agree.
- Second button: "Copy CSS only".
- Compose transforms in a fixed order (translate, rotate, scale) and document that order in the UI.
Explicitly out of scope, and say so in a README: path morphing, stroke draw-on animation, motion along a path, shape or text editing, filters, SMIL output, Lottie output, video export.
Also ship: a sample .svg in /public to test with, a Save/Load project list backed by IndexedDB, and a README with run instructions and the known Safari transform-origin caveat. No .env is needed since there are no secrets.Der Prompt öffnet sich vorausgefüllt in deinem Agenten. Prüfe ihn vor dem Ausführen. · dieser Prompt wurde aus dem Bauplan erzeugt · per PR verbessern
Wie sähe deine eigene Version aus?
Lade eine SVG, wähle Elemente aus, setze Keyframes für transform und opacity auf einer Zeitleiste, durchlaufe die Vorschau und exportiere eine eigenständige animierte SVG mit eingebetteten CSS-Keyframes.
Was du brauchst
- Ein moderner Browser
- Node für den lokalen Entwicklungsserver
- SVG-Dateien, die dir tatsächlich gehören, idealerweise mit sinnvollen Element-IDs
Animationstools verzeihen bei Details nichts: Eine Zeitleiste, die falsch einrastet, eine Easing-Kurve, die du nicht anpassen kannst, oder ein Export, der in Safari ruckelt, machen das ganze Tool unbrauchbar. Und nichts davon fällt dir auf, bevor du bereits drei Stunden lang an einem Kundenauftrag mit knapper Frist arbeitest. SVGator hat solche Fehler über Jahre hinweg ausgebügelt, und im Effektkatalog jenseits einfacher Transformationen steckt echte Arbeit. Mit der Zahlung kaufst du die browserübergreifenden Erfahrungen, die jemand anderes schmerzhaft gesammelt hat, statt sie selbst sammeln zu müssen.
xPfad-Morphing, schrittweises Zeichnen von Konturen und Bewegung entlang von Pfaden – die Effekte, für die Menschen dieses Tool kaufen
xEinen ausgereiften Editor für Easing-Kurven mit Voreinstellungen, die bewusst gestaltet statt einfach linear wirken
xExportziele jenseits von CSS: SMIL, JS-Laufzeit, Lottie, Video
xBrowserübergreifende Exportprüfungen und die Korrekturen für die Eigenheiten von Safari bei transform-origin
xIntegrierte Bearbeitung von Formen und Text, sodass du für jede Änderung an einem Asset zurück in deinen Vektoreditor musst
Nichts, worauf sich verweisen ließe. Deshalb gibt es den Prompt.
Was kostet SVGator?
- Monatliche Zahlung
- 24 $/Mon.24 $/Mon.
- Pro Jahr
- 288 $/Jahr288 $/Jahr
- Mit brasilianischer Karte, inkl. 3,5% IOF
- 125 R$/Mon.1.505 R$/Jahr
In Meine Liste gespeichert. Bei einer Preisänderung erscheint hier ein Hinweis.
Du schließt den Kauf auf der Website von SVGator ab. Vibe Radar wickelt keine Zahlungen ab.
SVGator selbst bauen oder abonnieren?
Passe die Zahlen an: Stunden zum Bauen, dein Stundensatz, Betriebskosten und der Abopreis.
Über 24 Monate ist das Abo günstiger.
Startwerte aus der Analyse geschätzt (ein Wochenende). Nicht eingerechnet ist, was dir fehlt (Support, Integrationen, Sicherheit).
Kann ich SVGator nachbauen?
Teilweise. Den Kern von SVGator baust du mit dem Prompt auf dieser Seite an einem Wochenende, aber es gibt echte Lücken: Pfad-Morphing, schrittweises Zeichnen von Konturen und Bewegung entlang von Pfaden – die Effekte, für die Menschen dieses Tool kaufen, Einen ausgereiften Editor für Easing-Kurven mit Voreinstellungen, die bewusst gestaltet statt einfach linear wirken. Lies die Liste oben, bevor du loslegst.
Was kostet SVGator?
SVGator kostet etwa 24 $/Mon. (Pro, geprüft am 20.10.2026), also 288 $ pro Jahr.
Was fehlt mir, wenn ich SVGator ersetze?
Ehrlich gesagt: Pfad-Morphing, schrittweises Zeichnen von Konturen und Bewegung entlang von Pfaden – die Effekte, für die Menschen dieses Tool kaufen; Einen ausgereiften Editor für Easing-Kurven mit Voreinstellungen, die bewusst gestaltet statt einfach linear wirken; Exportziele jenseits von CSS: SMIL, JS-Laufzeit, Lottie, Video; Browserübergreifende Exportprüfungen und die Korrekturen für die Eigenheiten von Safari bei transform-origin; Integrierte Bearbeitung von Formen und Text, sodass du für jede Änderung an einem Asset zurück in deinen Vektoreditor musst. Wenn dir davon etwas wichtig ist, zahl weiter.
Gibt es eine Open-Source-Alternative zu SVGator?
Es gibt keine ausgereifte Open-Source-Alternative, auf die sich verweisen ließe, und genau deshalb gibt es den Prompt auf dieser Seite.