Changing SMIL/SVG Animations into Gifs using aniGen - Eat your broccoli !!!

SVG SMIL inkscape cartoon animation of a bunch of broccoli with the left small branch waving.

    This page is about creating a GIG from a SMIL/SVG animationn using aniGen. More than a simple animation on a element beside translate or rotate.

    So, what if you want to do a more complex animation? For example what if you want to animate the D element of a path. In other words interpolate between a series of d paths for a element. SMIL allows this by doing an animate on the the attributeName d. How about a frame-by-frame animation using SMIL?

SVG SMIL inkscape cartoon animation of a boy refusing to eat his broccoli. Each time he takes a taste with his tongue its bleah And he turns his head in disgust, as he pounds the table.

    Well, the example below can help give you some ideas on how to achieve this and then change the SMIL/SVG animation into a gif by using aniGen and GIMP. This example uses frame by frame animation to achieve the head turn. And the movement on the arms by modifying the d path for both arms.

    The SVG image to be animated is that of a young man refusing to eat his broccoli. I call this animation "Eat your broccoli !!!" We will be looking at changing the SMIL/SVG file "AniGen Eat your broccoli v8.svg" to "AniGen Eat your broccoli v8.gif".

    So, let's get started in change this SMIL animation into a gif. There is a workflow we are going to have to follow. A lot of it is dependent upon the picky nature of aniGen and gimp. There are three simple steps to follow.

Step 1

1) The first is to create a SMIL/SVG animation in Inkscape. But, the trick is to create a aniGen compliant SMIL animation. Things to keep in mind when making your SMIL SVG animation is aniGen will allow the animation on the 'd' attribute as long as the SMIL animate tag includes a properly formated keyTimes. And ther are no white spaces in the value list of the animation. Which I have already done.
    Note: Works fine with the img tag in Chrome and Firefox. But will not work at all in Internet Explorer or Microsoft Edge.

Image showing the proper format of keyTimes in order for aniGen to properly export frames on the 'd' attribute.

Step 2

2) The second is to go to http://anigen.org/versions/0_8_1/ and load the animation into aniGen by clicking on "Choose a SVG file".

SVG SMIL inkscape animation loaded into aniGen ready for Export.

    Once the SVG file is loaded into aniGen you can test your SMIL animation by going to File then Show preview. A small window should open with the animation playing. You may also test the SMIL/SVG animation by clicking on a small icon in the upper left corner of the screen that looks like a stop watch. Once you have tested your SVG SMIL animation you are ready to export the frames.

    Goto File then Export. The export window will appear. Using aniGen export the animation at 25 frames per second. Make sure to also to set the export size to a desired width and hieght. The larger the width and hieght are the greater the resulting frame size. Now, GIMP may crash when importing large frames or too large a number of frames. Using "AniGen Eat your broccoli v8.svg" as an example GIMP was abe to hande 240 frames (10 sec x 24 frames per second) with each frame begin 400 by 300 easiy. It just took a long time to load the frames into GIMP.

aniGen Export screen.

Step 3

3) Import the frames into GIMP using File then Open as Layers. Select all the files in the folder. It will tae a while to load all the frames (files). After the frames have finished being loaded you may test the animation by.... and then export as a GIF. It should be carefully noted that aniGen use frames per second. While GIMP use delay between frames. So 25 frames per second in aniGen is the same as a delay of 40 miliseconds in GIMP.

Made by using anjGen to change a SMIL/SVG animation into a GIF.

    So, a major advantage of having a gif is it will work in all browsers. But the file size of the the resultng gif produced will of course be much larger than the SMIL SVG animation. A major drawback is the time needed to create the gif and that it wil not be scalable without quality degradation. So careful consideration must be paid to desired resoution of the resulting gif.

    The SML/SVG has a file size around 200 KB and the GIF version has a file size of about 2 MB. Yet the GIF version is set at a width of 400 and a hieght of 300. And the SMIL SVG displays perfectly at any size as long as the aspect ratio is maintained.

    The most important issue is of course you will have to learn both aniGen and GIMP.

Open GIF animation in new tab.

Links

  Doodle Scenes:    
  Chinese Puppet Show  Gone Fishin'... It's a Bee's Life
Grim Reaper