Faut-il créer votre propre SVGator ?
Éditeur de timeline dans le navigateur pour animer des fichiers SVG et les exporter en CSS, SMIL ou JavaScript.
Il n’y a ici ni réseau ni avantage difficile à copier fondé sur les données : c’est un éditeur individuel qui transforme votre propre SVG en SVG animé. Un agent peut tout à fait en construire l’ossature en une session : analyser le fichier, lister les éléments, placer des images clés de transform et d’opacity sur une timeline, puis produire des images clés CSS dans le SVG. Ce qui prend tout le week-end, et davantage, c’est tout ce qui vient après transform : morphing de tracés, dessin progressif des contours, déplacement le long d’un tracé, véritable éditeur de courbes de Bézier pour l’accélération, origines de transform pour les groupes et chaîne d’export qui ne casse pas dans Safari. Le fonctionnement essentiel survit à une réalisation maison ; les derniers 20 pour cent des fonctionnalités constituent le véritable produit. Construisez-le si vous animez deux ou trois propriétés et ajustez le reste à la main ; achetez-le si vous vivez de la production de micro-animations illustrées.
EN → FRAnalyse traduite automatiquement de l’anglais. Prompt original conservé en anglais.
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.Le prompt s’ouvre prérempli dans votre agent. Relisez-le avant de l’exécuter. · ce prompt est généré à partir du plan de construction · améliorez-le via une PR
Comment créer votre propre version ?
Chargez un SVG, choisissez des éléments, définissez des images clés pour transform et opacity sur une timeline, parcourez l’aperçu et exportez un SVG animé autonome avec des images clés CSS intégrées.
Ce dont vous aurez besoin
- Un navigateur moderne
- Node pour le serveur de développement local
- Des fichiers SVG dont vous êtes réellement propriétaire, idéalement avec des identifiants d’éléments cohérents
Les outils d’animation ne pardonnent aucun détail : une timeline dont l’alignement automatique tombe mal, une courbe d’accélération impossible à ajuster ou un export qui tremble dans Safari rendent l’ensemble inutilisable, et vous ne découvrez ces problèmes qu’après trois heures de travail sous la pression d’une échéance client. SVGator a absorbé des années de bugs de ce type, et le catalogue d’effets au-delà des simples transformations représente un vrai travail. Payer permet d’acheter l’expérience des incompatibilités entre navigateurs acquise par quelqu’un d’autre, plutôt que de l’acquérir vous-même à vos dépens.
xLe morphing de tracés, le dessin progressif des contours et le déplacement le long d’un tracé, qui sont les effets pour lesquels les gens achètent cet outil
xUn éditeur soigné de courbes d’accélération avec des préréglages qui donnent un mouvement maîtrisé plutôt que linéaire
xDes formats d’export au-delà de CSS : SMIL, environnement d’exécution JS, Lottie, vidéo
xLes vérifications de cohérence des exports entre navigateurs et les correctifs des particularités de transform-origin dans Safari
xL’édition intégrée des formes et du texte : sans elle, chaque modification d’un élément impose un aller-retour dans votre éditeur vectoriel
Rien qui mérite d’être cité. C’est pour cela que le prompt existe.
Combien coûte SVGator ?
- Facturation mensuelle
- 24 $US/mois24 $US/mois
- Par an
- 288 $US/an288 $US/an
- Avec une carte brésilienne, IOF de 3,5% inclus
- 125 R$/mois1 502 R$/an
Enregistré dans Ma liste. Un avis s’affichera ici si le prix change.
Vous finalisez l’achat sur le site de SVGator. Vibe Radar ne gère aucun paiement.
Construire ou s’abonner à SVGator ?
Ajustez les chiffres : heures de développement, taux horaire, coûts d’exploitation et prix de l’abonnement.
Sur 24 mois, l’abonnement coûte moins cher.
Heures estimées d’après l’analyse (un week-end). Ne chiffre pas ce que vous perdez (support, intégrations, sécurité).
Puis-je recréer SVGator ?
En partie. Le cœur de SVGator se construit en un week-end avec le prompt de cette page, mais il reste de vraies lacunes : Le morphing de tracés, le dessin progressif des contours et le déplacement le long d’un tracé, qui sont les effets pour lesquels les gens achètent cet outil, Un éditeur soigné de courbes d’accélération avec des préréglages qui donnent un mouvement maîtrisé plutôt que linéaire. Lisez la liste ci-dessus avant de vous lancer.
Combien coûte SVGator ?
SVGator coûte environ 24 $US/mois (Pro, vérifié le 20/10/2026), soit 288 $US par an.
Que perd-on en remplaçant SVGator ?
Honnêtement : Le morphing de tracés, le dessin progressif des contours et le déplacement le long d’un tracé, qui sont les effets pour lesquels les gens achètent cet outil; Un éditeur soigné de courbes d’accélération avec des préréglages qui donnent un mouvement maîtrisé plutôt que linéaire; Des formats d’export au-delà de CSS : SMIL, environnement d’exécution JS, Lottie, vidéo; Les vérifications de cohérence des exports entre navigateurs et les correctifs des particularités de transform-origin dans Safari; L’édition intégrée des formes et du texte : sans elle, chaque modification d’un élément impose un aller-retour dans votre éditeur vectoriel. Si l’un de ces points compte pour vous, continuez à payer.
Existe-t-il une alternative open source à SVGator ?
Aucune alternative open source mature à recommander, et c’est précisément pour cela que le prompt de cette page existe.