Transformez un SVG en animation Lottie

Partez d’une icône, d’un logo ou d’une illustration SVG. Ouvrez le fichier dans Libre, ajoutez du mouvement et téléchargez une animation Lottie. L’éditeur et l’export sont gratuits.

Animer un SVG

Édition et export gratuits. Aucun compte nécessaire.

L’éditeur et la documentation sont en anglais.

Du SVG à l’animation

  1. Importez votre SVG

    Ouvrez Studio et choisissez Import, ou glissez le SVG dans une animation ouverte. Vous pouvez aussi coller du code SVG. Si une vérification de l’import apparaît, contrôlez le résultat et choisissez Insert.

  2. Choisissez ce qui bouge

    Sélectionnez un calque. Au début de la timeline, cliquez sur le losange à côté de Position pour poser la première image clé.

  3. Ajoutez le mouvement

    Avancez la tête de lecture et déplacez le calque vers sa position suivante. Appuyez sur la barre d’espace pour lire l’animation. La rotation, l’échelle et l’opacité s’animent de la même façon.

  4. Téléchargez le Lottie

    Choisissez Export, vérifiez l’aperçu Lottie et téléchargez Lottie JSON ou dotLottie. Gardez aussi une source Libre modifiable avec Document actions → Download source.

Avant l’import

  • Un SVG statique reste immobile tant que vous n’ajoutez pas d’images clés. Les animations SVG en CSS, SMIL ou JavaScript ne sont pas transférées dans la timeline.
  • Si une illustration complexe change à l’import, simplifiez-la ou convertissez ses éléments en tracés vectoriels dans l’application d’origine. Vérifiez le résultat avant de l’animer.

Envie d’essayer d’abord ? Ouvrez l’exemple modifiable Success.