Seu primeiro SVG animado

Um SVG descreve uma ilustração usando formas, coordenadas e cores. Por ser vetorial, ele pode crescer sem perder nitidez. Quando cada forma tem seu próprio movimento, a ilustração ganha ritmo sem precisar virar um vídeo.

1. Escolha uma ilustração simples

Abra o editor e experimente o exemplo Geometria. Você também pode importar um arquivo de até 1 MiB. Prefira SVGs com atributos de apresentação: fill, stroke e transform. Estilos CSS, imagens embutidas e filtros não fazem parte do formato aceito nesta versão.

2. Selecione e aplique um preset

Clique no quadrado ou selecione seu identificador no painel Elementos. Aplique Spin. O editor cria uma rotação de 0 a 360 graus em torno do centro da forma. O desenho original fica dentro de um grupo que recebe a animação, preservando sua transformação original.

3. Ajuste os cinco canais

Os campos X e Y deslocam a forma no espaço de coordenadas do pai. Rotação é medida em graus; escala é um fator, como 1,08; opacidade é um multiplicador de 0 a 1. Todos os canais do mesmo alvo compartilham duração, atraso, easing e repetição.

4. Confira a timeline

Reproduza, pause e arraste o marcador para comparar instantes. Você também pode digitar o tempo em milissegundos. O loop do preview repete a janela da timeline; a opção de repetição de cada elemento define o comportamento exportado.

5. Guarde e exporte

Baixe o JSON para voltar a editar. Depois escolha CSS ou JavaScript e abra a demonstração do pacote com um servidor HTTP local. O SVG deve estar inline no HTML para que o código alcance suas formas.