Libre
Abrir editor

Transforme SVG em animação Lottie

Comece com um ícone, logotipo ou ilustração em SVG. Abra no Libre, adicione movimento e baixe uma animação Lottie. O editor e a exportação são gratuitos.

Animar um SVG

Edição e exportação gratuitas. Não precisa de conta.

O editor e a documentação estão em inglês.

Do SVG à animação

  1. Importe seu SVG

    Abra o Studio e clique em Import, ou arraste o SVG para uma animação aberta. Você também pode colar código SVG. Se aparecer uma revisão da importação, confira o resultado e clique em Insert.

  2. Escolha o que vai se mover

    Selecione uma camada. No início da linha do tempo, clique no losango ao lado de Position para criar o primeiro quadro-chave.

  3. Adicione movimento

    Avance o indicador de tempo e arraste a camada para a próxima posição. Pressione espaço para reproduzir. Você pode animar rotação, escala e opacidade do mesmo jeito.

  4. Baixe o Lottie

    Clique em Export, confira a prévia de Lottie e baixe Lottie JSON ou dotLottie. Salve também uma cópia editável do Libre em Document actions → Download source.

Antes de importar

  • Um SVG estático só se move depois que você adiciona quadros-chave. Animações SVG feitas com CSS, SMIL ou JavaScript não são transferidas para a linha do tempo.
  • Se uma ilustração complexa mudar na importação, simplifique-a ou converta os elementos em caminhos vetoriais no aplicativo de origem. Confira o resultado antes de animar.

Quer experimentar primeiro? Abra o exemplo editável Success.