SVGasm - Créer une animation SVG à partir d'un GIF ou de plusieurs SVG statiques

par Korben -

Saviez-vous qu’il était possible de transformer un GIF animé en SVG animé ? Alors c’est un peu technique puisqu’il faut redessiner chaque frame du GIF en vectoriel, puis assembler le tout à l’aide d’images clés CSS pour réaliser la séquence animée.

Heureusement l’outil SVGasm va vous permettre de faire cela très facilement. Il utilise différents logiciels afin de réaliser la séquence suivante :

  • Produit un seul fichier SVG animé qui peut être visualisé dans Chrome, Safari, Firefox, Edge et IE 10+.
  • Exécute le nettoyeur SVG svgcleaner (par défaut) ou svgo pour réduire chaque fichier SVG.
  • Exécute le traceur de bitmap potrace (par défaut) ou autotrace, ou primitive pour convertir les images matricielles en SVG.
  • Exécute le processeur d’image graphicsmagick (par défaut) ou imagemagick pour convertir les animations GIF en frames.

Les commandes d’exécution sont assez fournies donc je vous invite à consulter la page Github qui propose de nombreux exemples.

Pour installer svgasm sous macOS, ouvrez un terminal et entrez la commande suivante :

brew install tomkwok/tap/svgasm svgasm

Ou en le compilant et le lançant directement sous Linux comme ceci :

git clone https://github.com/tomkwok/svgasm
cd svgasm/
make
./svgasm

Ainsi la commande suivante, produira une animation noir et blanc.

svgasm goodmorning.gif > good.svg

Et la commande suivante sortira une animation SVG en 120 couleurs :

svgasm -t 'autotrace --output-format svg --color-count 120 --despeckle-level 16 --despeckle-tightness 1.5 --tangent-surround 1 --remove-adjacent-corners "%s"' -s 'svg {background-color: gray}' monday.gif > monday.svg

Pour le faire fonctionner, vous aurez peut-être également besoin de svgo, autotrace, primitive. SVGasm permet également de créer une animation de SVG à partir d’une série de SVG comme ceci :

svgasm -d 2 -i 5 -e 0 -o animation.svg input1.svg input2.svg input3.svg

Par contre, attention à la taille des fichiers. Parfois un bon vieux GIF pèsera moins lourd qu’un SVG animé.