Vale construir sua versão de SVGator?
Editor de linha do tempo no navegador para animar arquivos SVG e exportá-los como CSS, SMIL ou JavaScript.
Não há rede de usuários nem barreira baseada em dados aqui: é um editor individual que transforma seu próprio SVG em um SVG animado. Um agente consegue perfeitamente construir a estrutura em uma sessão: interpretar o arquivo, listar os elementos, definir quadros-chave de transform e opacity em uma linha do tempo e gerar quadros-chave CSS dentro do SVG. O que consome o fim de semana e mais um pouco é tudo que vem depois de transform: transformação de caminhos, traços que se desenham, movimento ao longo de um caminho, um editor de curvas de suavização Bézier de verdade, origens de transformação de grupos e um pipeline de exportação que não quebre no Safari. O fluxo principal sobrevive à versão feita por conta própria; é nos últimos 20 por cento da lista de recursos que está o produto de verdade. Construa se você anima duas ou três propriedades e ajusta o resto à mão; compre se ganha a vida entregando microanimações ilustradas.
EN → PTPesquisa traduzida automaticamente do inglês. Prompt original preservado em inglês.
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.O prompt abre preenchido no seu agente. Revise antes de executar. · este prompt foi gerado a partir do plano de construção · melhore com um PR
Como seria construir sua versão?
Carregue um SVG, escolha elementos, defina quadros-chave de transform e opacity em uma linha do tempo, percorra a prévia e exporte um SVG animado independente com quadros-chave CSS embutidos.
O que você vai precisar
- Um navegador moderno
- Node para o servidor local de desenvolvimento
- Arquivos SVG que sejam realmente seus, de preferência com ids de elementos bem definidos
Ferramentas de animação não perdoam falhas nos detalhes: uma linha do tempo com encaixe impreciso, uma curva de suavização que você não consegue ajustar ou uma exportação que treme no Safari tornam tudo inútil, e nada disso aparece até você já ter passado três horas trabalhando contra o prazo de um cliente. O SVGator acumulou anos de correções desses bugs, e o catálogo de efeitos além das transformações simples exige trabalho de verdade. Pagar é uma forma de comprar a experiência de outra pessoa com problemas entre navegadores em vez de adquirir a sua na marra.
xTransformação de caminhos, traços que se desenham e movimento ao longo de caminhos, que são os efeitos pelos quais as pessoas compram o produto
xUm editor refinado de curvas de suavização com predefinições que parecem intencionais em vez de lineares
xFormatos de exportação além de CSS: SMIL, runtime JS, Lottie, vídeo
xVerificações de integridade das exportações entre navegadores e correções para as peculiaridades de transform-origin do Safari
xEdição integrada de formas e texto, de modo que cada alteração de recurso exige voltar ao editor vetorial
Nada que valha indicar. Por isso o prompt existe.
Quanto custa SVGator?
- Plano mensal
- US$ 24/mêsUS$ 24/mês
- Por ano
- US$ 288/anoUS$ 288/ano
- No cartão, com IOF de 3,5%
- R$ 125/mêsR$ 1.505/ano
Salvo na Minha lista. Você recebe um aviso aqui no site quando o preço mudar.
Você conclui a compra no site de SVGator. O Vibe Radar não intermedeia pagamentos.
Vale mais construir ou assinar SVGator?
Ajuste os números: horas para construir, valor da sua hora, custos para manter no ar e o preço da assinatura.
Em 24 meses, assinar sai mais barato.
Horas iniciais estimadas a partir da análise (um fim de semana). Não inclui o valor do que você deixa de ter (suporte, integrações, segurança).
Dá para recriar SVGator?
Em parte. O núcleo de SVGator dá para construir em um fim de semana com o prompt desta página, mas há lacunas reais: Transformação de caminhos, traços que se desenham e movimento ao longo de caminhos, que são os efeitos pelos quais as pessoas compram o produto, Um editor refinado de curvas de suavização com predefinições que parecem intencionais em vez de lineares. Leia a lista acima antes de começar.
Quanto custa SVGator?
SVGator custa cerca de US$ 24/mês (Pro, checado em 20/10/2026), ou seja, US$ 288 por ano.
O que eu perco ao substituir SVGator?
Sinceramente: Transformação de caminhos, traços que se desenham e movimento ao longo de caminhos, que são os efeitos pelos quais as pessoas compram o produto; Um editor refinado de curvas de suavização com predefinições que parecem intencionais em vez de lineares; Formatos de exportação além de CSS: SMIL, runtime JS, Lottie, vídeo; Verificações de integridade das exportações entre navegadores e correções para as peculiaridades de transform-origin do Safari; Edição integrada de formas e texto, de modo que cada alteração de recurso exige voltar ao editor vetorial. Se algum desses pontos é essencial para você, continue pagando.
Existe uma alternativa aberta para SVGator?
Não há alternativa open source madura que valha indicar, e é exatamente por isso que o prompt desta página existe.