How to make Animated GIF from SVG: ‘Shishi — Lion Dance’

Danjiro Daiwa

6 min readJan 18, 2019

This article shows how to create this animation from SVG by using Free Software 9VAe .

Other Making Animations is here. Click here for 9VAe data.

Download 9VAe

Download SVG image

Download SVG vector image from Openclipart — Shishi Lion Dance.

PC (Windows/Mac/Linux)

Click your right mouse button on [Download > SVG(Vector)] .
Click [Save Link As] in the right button menu. (The menu item will be different according to your browser.)
Click [Save] button. Now SVG file will be saved on your PC.
Open 9VAe.
Click [File] on the menu bar > Click [Open]. Select the SVG file.
Select the SVG file. Click [Open].

Android / iOS

Tap and hold on [Download > SVG(Vector)].
Tap ‘Copy (link address)’ on menu. URL address will be copied.
Open 9VAe.
Tap ‘Input’ > ‘Download from Web…’ on the menu.
Tap and hold on http input area. Tap ‘Paste’ to input URL address.
Tap ‘OK’ then the clipart will appear on stage.

Click magnifying glass button in the lower left corner (A in the figure below), you will see the whole image. Click the lower right corner (B below) to enlarge the screen.

Save the contents of AnimeCast (when loaded from Tool menu)

The illustration read from the tool menu will be an animation of a part called AnimeCast. If you want to use it as a still image, AnimeCast is more convenient, but if you want to add movement, open the contents of the AnimeCast.

Click the “+” (C in the above figure) in the center of the selection frame. Click “Edit AnimeCast (…)” from the menu. The inside of the AnimeCast opens.
Click “File> Save As” and save it as “shishi”.
Click “File> Open” on the menu bar. Open “shishi.svg”.
Let’s make an animation with this.

Add Next Page

Click the green [+] on the right side of the page (E below). Click [Add Next Page] from the menu. You can now create the second page.

Select only the body and pattern

Select the body and click Point selection (E above)

Because the whole shape is grouped, all the points are displayed.

2. Select the point of the pattern under the mouth.

3. Click Point selection (E above) again. Only the graphics containing the selected points are selected.

Register and hide graphics

Click the registered button “+” (G above).

The selected body and pattern will be registered in the pallet.

2. Click the registered button (H above). Click [Hide] in the menu. The body and pattern will be hidden.

Choose lower teeth and jaws and open mouth

In the same way select only the lower teeth and jaw.
Click

Select only the lower teeth and jaw.

3. Drag and move it down (J above). The mouth will be opened.

Input Turn command on the 1st page

Click “<<” (L above) to go to the 1st page.

2. Click [Input] on the menu bar > Click [Turn] (M above). Turn command on the 1st page will make a round-trip animation between 1st page and 2nd page.

3. Click PLAY to see the animation. Click STOP to stop it.

In the animation, the body pattern remains on your mouth. In the original illustration, since the pattern and the mouth were apart, the stacking order was not taken into consideration.

Make the lion’s head AnimeCast

Touch page 2 (O in the figure below) or “>” to move to page 2.

Select the lion’s head and touch the point selection (P above )
Enclose the points in the lion’s head with a blue line (Q above ), and touch the point selection button again. (In the case of the PC version, you can select points by surrounding them with a blue line by dragging the screen while pressing the Ctrl key.) Then the points of lion’s head will be selected.
Touch the “+” (R above ) in the center of the selection frame. Touch “Select Connected Objects” from the menu. This will select the lion heads in 2 pages.
Touch the Cut button (S above ) and cut the lion head into a memory tool.
Touch the button (T above ) to make the AnimeCast. The name can be anything. Press “OK”, the lion head AnimeCast will be entered.
Touch the button (U above ) to copy objects to the previous page. This will copy the on head AnimeCast to page 1.

Add movement to the AnimeCast

Touch the “+” (V in the figure below) in the center of the selection frame. Touch “Create Path” from the menu. Touch “No” to “You can create path by moving the AnimeCast on the next page. Do you want to go to the next page ?” There will be a red line (moving path) on the screen.

Add a point to the red line (moving path) (W above). The head moves along the red line.
Touch page 2 or “>” (X in the above figure) to move to page 2.
Touch the corner handle of the selection frame (Y above). Select “Rotate” from the menu to rotate the AnimeCast a little and bend the head. Please see the movement with the play button.
Touch the “+” (Z in the figure below) in the center of the AnimeCast selection frame. Touch “Edit AnimeCast …”. The lion’s head opens.

5. Touch page 1 or “<<” (a in the above figure) to go to page 1.

6. Touch the “Input menu > Turn “ (b above) .

7. Touch the time on page 1 (c above), then touch “- 0.1 second” to set the time to 0.5 seconds. The mouth will open and close in 0.5 seconds.

8. Touch “shishi.svg” (d above ) in bold letters “shishi.svg> xxxx” on the screen. Touch “Return” from the menu. Return to the main animation.

9. Touch PLAY button to see the animation.

Animated GIF Export

Before making an animated GIF export, Click [File] on the menu bar > Click [Save].
Click [File] on the menu bar > Click [Animated GIF Export].
In case of infinite loop, setting of time length is necessary. In this example, 1 round trip is 2 seconds, so set 2.

By using Free Software 9VAe, you can create animated GIF from SVG illustration. There are over 150,000 SVG illustrations in Openclipart. Please try making animation.

9VAe Introduction

9VAe Beginner Tutorials

Originally published at qiita.com.