SVGasm – Create SVG animation from GIF or multiple static SVGs

Did you know it was possible to turn an animated GIF into an animated SVG? So it’s a bit technical since you have to redraw each frame of the GIF in vector, then assemble everything using CSS key images to create the animated sequence.

Fortunately the tool SVGasm will allow you to do this very easily. He uses different software to perform the following sequence:

  • Produces a single animated SVG file which can be viewed in Chrome, Safari, Firefox, Edge and IE 10+.
  • Run the SVG cleaner svgcleaner (default) or svgo to minify each SVG file.
  • Runs the potrace (default) or autotrace bitmap tracer, or primitive to convert raster images to SVG.
  • Runs the graphicsmagick (default) or imagemagick image processor to convert GIF animations to frames.

The execution commands are quite extensive so I invite you to consult the Github page which offers many examples.

To install svgasm on macOS, open a terminal and enter the following command:

brew install tomkwok/tap/svgasm
svgasm

Or by compiling and running it directly under Linux like this:

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

So the following command will produce a black and white animation.

svgasm goodmorning.gif > good.svg

And the following command will output an SVG animation in 120 colors:

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

To make it work you may also need svg, autotrace, primitive. SVGasm also allows you to create an SVG animation from a series of SVGs like this:

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

However, pay attention to the file size. Sometimes a good old GIF will weigh less than an animated SVG.

5/5 - (1 vote)
SAKHRI Mohamed
SAKHRI Mohamed

The blog of a computer enthusiast who shares news, tutorials, tips, online tools and software for Windows, macOS, Linux, Web designer and Video games.

Articles: 3732

Leave a Reply

Your email address will not be published.