Introduction: Make Animation From Openclipart's SVG With Raspberry Pi

This is an Instructable which describes the process of making an animation from Openclipart's SVG.

Openclipart library is a collection of 100% license-free art that you can use for any purpose.

I will explain this Instructable for the Raspberry Pi user.

If you are a Macintosh or Ubuntu user, download the following software.

You can do the same Instructable from Step 7.

  • If you can't open 9va-mac, check the Gatekeeper setting in System Preferences > Security & Privacy > General > "Allow applications downloaded from:.

Step 1: Start Pi Store

Double click on the Pi Store shortcut on the desktop on your Raspberry Pi. If you can't find the Pi Store , it will be in the "Internet" menu from Raspberry Pi's [Menu] button.

Step 2: Login to Pi Store

Click the Log In link on the upper right corner and then click [Register] button.

Step 3: Register Your Mail Address and Password

Enter your email address and a password. Click [Sign Me Up!] button. You will Login to Pi Store.

Step 4: Search '9va-pi'

Enter '9va-pi' into the search field and click [search(Magnifying glass)] button.

Step 5: Download '9va-pi'

Click '9VA-pi'. Click [Free Download] button.

Now download and installation will begin.

Press any key after the installation finished.

Step 6: Launch '9va-pi'

Click '9VA-pi' in My Library. Click [Launch] button.

Now 9va-pi will start.

Step 7: Download Original SVG (barrelFish.svg) to Desktop

Open https://openclipart.org/detail/217565/barrel-fish with your favorite browser.

Download "barrelFish.svg" to your desktop as follows.

Click your right mouse button on [DOWNLOAD] button.

Click [Save Link As] in the right button menu. (The menu item will be different according to your browser.)

Click [Home]. Double click [Desktop]. Click [Save] button.

Now SVG file "barrelFish.svg" will be saved on your desktop.

SVG (Scalable Vector Graphics) is the vector graphics format and you can modify the shape by using SVG editor like 'Inkscape'.

Step 8: Open the Original SVG With '9va-pi'

Click '9va-pi' icon to raise a '9va-pi' window and open the barrelFish.svg on the desktop as follows.

Click [File] on the menu bar > Click [Open]. Now Open File Dialog Box will appear.

Click [Home] > [Desktop] > Click on [barrelFish.svg].

Click [Open].

Step 9: The Message "Data Couldn't Be Converted"

Then the message "Some Data couldn't be converted. (Filter)" will appear.

This message occurs because '9va-pi' doesn't have a filter operation.

Click [OK] button.

Step 10: Ungroup BarrelFish 4 Times

A dark brown plate of the barrelFish is a filter conversion error.

In order to get rid of it, click the barrelFish. Now the selection frame will appear around the barrelFish.

Click [Modify] on the menu bar > Click [Ungroup].

This will ungroup the barrelFish. Do the same operation 4 times.

Now we are ready to select the dark brown plate.

Step 11: Select Dark Brown Plate of the BarrelFish by Using Hide Option of Registered Button

I will explain how to select a shape from the complex objects.

To deselect the objects, click anywhere on the page away from the shape.

Click on the dark brown plate of the barrelFish first.

It may be difficult to select it correctly at once, but it's OK.

Click [+] button of the Time Control panel on the right side of the window.

Now the selected object will be registered in one of the blank buttons of the time control panel.

Click on the registered button > Click [Hide].

Now the selected object will be hide.

Repeat the same operation until selecting the dark plate in the barrelFish.

If you failed to select the dark plate, click [+] > Click registered button > [Hide] again.

Step 12: Select Dark Brown Plate of the BarrelFish and Delete It

If you succeed to hide the dark brown plate, Click the registered button of the dark brown plate > Click [Select].

Now the dark brown plate of the barrelFish will be selected.

Click the [Eraser] button on the lower tool palette on the left side of the window. Now the filter conversion error will be deleted.

Step 13: Add the Second Page

Click the [+] button at the end of the page bar on the top of the window. > Click [Add Next Page].

Now the second page will appear on the page bar.

Step 14: Select the Tail of the BarrelFish

Drag a rectangle around the tail of the barrelFish and select the tail.

Click on the [Edit points] button on the lower tool palette on the left side of the window.

Now control points will appear.

Drag a rectangle around the control points of the tail and select them.

Click on the [+] button on the lower left corner of the window several times.

Now the tail will be zoomed in.

Step 15: Transform the Tail of the BarrelFish

The transform menu places each handles (little squares) of the selection frame, one in each corner and one on the top, bottom, left, and right. We can modify the shape by clicking on any of the handles or dragging them.

Click the right side handle of the selection frame > Click [Stretch].

Now the shape will be changed according to your mouse movement. Click the mouse button when the shape becomes desired shape.

Click the [Magnifying glass] button on the lower left corner of the window.

Step 16: Register the Side Fin of the BarrelFish

To deselect the control points, click several times anywhere on the page away from the shape.

Click on the side fin of the barrelFish.

Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered in one of the button of the time control panel.

Click on the registered button > Click [Hide]. Now the registered object will be hide.

Click on another part of the side fin of the barrelFish.

Click on the registered button > Click [Add to Time Group]. Now the selected shape will be hide.

Repeat the same operation until selecting all parts of the side fin of the barrelFish.

Step 17: Select the Side Fin of the BarrelFish

Click on the registered button > Click [Select]. Now the side fin will be selected.

Click on the [Edit points] button on the lower tool palette on the left side of the window.

Step 18: Transform the Side Fin of the BarrelFish

Drag a rectangle around the control points of the side fin.

Click the right side handle of the selection frame > Click [Stretch]. Now the shape will be changed according to your mouse movement. Click the mouse button when the shape becomes desired shape.

Step 19: Zoom in the Anal Fin of the BarrelFish

To deselect the control points, click several times anywhere on the page away from the shape.

Drag a rectangle around the anal fin of the barrelFish and select the anal fin.

Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.

Drag a rectangle around the control points of the anal fin. Click on the [+] button on the lower left corner of the window several times. Now the anal fin will be zoomed in.

Step 20: Select the Anal Fin of the BarrelFish With Ctrl Key + Drag

Use the Lasso select tool to select the anal fin.

Hold down the Ctrl key on the keyboard, drag and draw a blue line around the control points of the anal fin.

(If you are a Macintosh user use Command key.)

The selection frame will appear around the anal fin.

Step 21: Transform the Anal Fin of the BarrelFish by Using Soft Pin

Click the right side handle of the selection frame > Click [Transform with pin] twice.

The menu item will change to [Transform with soft pin].

Click [Stretch].

Now the shape will be changed according to your mouse movement. Click the mouse button when the shape becomes desired shape.

When the [Transform with pin] is active, the control points near the edge of selection won't move so much. The transformation result will be smooth.

Step 22: Move the Mouth of the BarrelFish Toward the Left

Click the [Magnifying glass] button on the lower left corner of the window.

To deselect the control points, click several times anywhere on the page away from the shape.

Click the mouth of the barrelFish. The selection frame will appear around the mouth.

Drag the center handle [+] of the selection frame toward the left.

Step 23: Enlarge the Mouth of the BarrelFish by Using Transform With Soft Pin

Drag a rectangle around the head of the barrelFish and select the head.

Click on the [Edit points] button on the lower tool palette on the left side of the window. Now control points will appear.

Drag a rectangle around the control points of the mouth.

Drag the corner handle of the selection frame outward. Now the head will become larger by using Transform with soft pin.

Step 24: Enlarge the Mouth of the BarrelFish

Click and select the mouse of the barrelFish.

Drag the center handle [+] of the selection frame toward the mouth's original position.

Drag the corner handle of the selection frame outward. Now the mouth will become larger.

Step 25: Group Iron Balls and Iron Rings in 2 Registered Buttons

In order to make iron balls' animation,

we should group all iron balls together.

Click an iron ball or an iron ring and select it.

Click [+] button of the Time Control panel on the right side of the window. Now the selected object will be registered to a button of the time control panel.

Click on the registered button > Click [Hide]. Now the registered shape will be hide.

Click another iron ball or a ring and select it.

If the selected object is the same kind of the registered button , Click the same registered button > Click [Add to Time Group]. Now the selected shape will be hide.

If the selected object is not the same kind of the registered object, Click [+] button to make a new registered button. Click the new registered button > Click [Hide]. Now the new registered shape will be also hide.

Finally iron balls and iron rings will be hide. They are grouped in the iron ball's button or the iron ring's button.

Step 26: Cut the Iron Balls of the First Page and the Second Page Into the Clipboard

Click on the iron ball's registered button > Click [Select]. Now the iron balls will be selected.

Click the center handle [+] of the selection frame > Click [Select Connected Objects]. Now the iron balls of the first page and the second page will be selected together. The line type of the selection frame will be changed to double-line.

Click the [Cut] button on the upper side of the Clipboard on the right side of the window.
Now the iron balls of the first page and the second page will be cut into the Clipboard.

Step 27: Create Animecast From Clipboard

Click on the first page and go to the first page.

Click the [9] button on the lower side of the Clipboard on the right side of the window.

A dialog box will appear. Enter the Animecast's name, for example - “rotating ring”, into the text field. Click [OK].

Animecast is a graphics object which includes iron balls in the Clipboard.

The bold file name "barrelFish" will appear.

Step 28: Open the Content of AnimeCast

Click on the bold text "barrelFish" > Click [:rotating ring]

Now the content of the animecast will appear.

Click the [+] button at the end of the page bar > Click Add Next Page.

Now the second page will appear on the page bar.

Step 29: Change the Size of Animecast

Click [Page] on the menu bar > Click [Page size]

Now the page size input dialog will appear.

Enter "600" "600". Click [OK] button.

Click the [Magnifying glass] button on the lower left corner of the window.

Step 30: Add Background Page

Click the [<] button on the left end of the page bar > Click [Add Background Page].

The blank background page will be added.

Step 31: Copy the Contents of the Second Page to the Background Page

Click on the second page and go to the second page.

Drag a rectangle around iron balls to select all of them.

Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the contents of the second page will be copied to the background page.

Step 32: Delete the First Ball on the Top Left

Click on the third page and go to the third page.

Drag a rectangle around the top 3 balls on the left balls.

Click the [+] button on the lower left corner of the window several times. Now 3 balls are displayed in the center of the window.

Drag a rectangle around the first ball to select it.

Click the [Eraser] button on the lower tool palette on the left side of the window.

Now the first ball will be deleted but the first ball on the background page will still appear.

Step 33: Select the Second Ball and Snap the [+] Handle to the Bottom of It

Drag a rectangle around the second ball to select it.

Holding down Ctrl key (If you are a Macintosh user, holding down command key), drag the center handle [+] of the selection frame toward the bottom of the second ball.

Only the [+] handle will move. The [+] handle will be snapped to each control point of the ball.

Move and snap the [+] handle to the bottom of the second ball.

Step 34: Move the Second Ball to the First Ball's Position by Using Ctrl Key Snap

Release Ctrl key.

Drag the handle [+] of the selection frame toward the position of the first ball.

Hold down Ctrl key, then the handle [+] will be snapped to the control points of the background ball.

Snap it to the bottom of the first ball, then you can move the second ball to the position of the first ball precisely.

Step 35: Move the Other Balls to the Previous Ball's Position

Press space key, and drag the canvas toward the top. The area displayed can be changed.

Repeat as follows

  1. Select the next ball.
  2. Hold down Ctrl (or Command) Key
  3. Drag [+] handle and snap it to the bottom of the ball.
  4. Drag [+] handle without Ctrl Key to start dragging the ball upward.
  5. Hold down Ctrl Key.
  6. Drag and snap the ball to the position of the previous ball.

Step 36: Duplicate the Bottom Ball and Copy It to the Second Page

After you finish moving the bottom ball, Click the center handle [+] of the selection frame > Click [Duplicate].

Now the new ball will appear.

Drag the center handle [+] of the new ball and move it toward the lower left a little.

Click on the [Copy to previous page] button on the lower tool palette on the left side of the window. Now the new ball will be copied to the second page.

Step 37: Make the Size of Bottom Ball Smaller

Drag the corner handle of the selection frame inward.

Now the size of the ball will be small.

Step 38: Move the Bottom Ball of the Right Balls and Resize It

Click on the third page and go to the third page.

Drag a rectangle around the bottom ball of the right balls to select it.

Drag the center handle [+] of the bottom ball and move it toward the lower left a little. Drag the corner handle of the selection frame inward. Now the size of the bottom ball will be small.

Step 39: Move the Other Balls of the Right Balls to the Previous Ball's Position

Press space key, and drag the canvas toward the bottom. The area displayed can be changed.

Move the right balls toward the lower as follows

  1. Select the next ball.
  2. Hold down Ctrl (or Command) Key
  3. Drag [+] handle and snap it to the bottom of the ball.
  4. Drag [+] handle without Ctrl Key to start dragging the ball toward the lower.
  5. Hold down Ctrl Key. Drag and snap the ball to the previous ball's position.

Step 40: Delete the Background Page

Click [<<] button on the bottom of the page bar and go to the first page.

Click on the page number [1] of the first page. > Click [Cut Page]

Now the first background page will be deleted.

Step 41: Delete the Top Left Ball of the First Page

Drag a rectangle around the top left ball to select it.

Click the [Eraser] button on the lower tool palette on the left side of the window. Now the top left ball will be deleted.

Step 42: Input Loop Button on the First Page

Click [Input] on the menu bar > Click [Loop]

Now the Loop button will appear.

Step 43: Play Iron Ball's Animation

Click [Play] button on the bottom of the page bar.

You will see the rotating iron ball's animation.

Click [Stop] button or ESC key to stop the animation.

Step 44: Return to BarrelFish

Click on the bold text "barrelFish" > Click [Return]

Now the barrelFish will appear.

Step 45: Input Turn Button on the First Page

Click [Input] on the menu bar > Click [Turn]

Now the Turn button will appear.

Step 46: Play BarrelFish's Animation

Click [Play] button on the bottom of the page bar.

You will see the barrelFishl's animation.

Click [Stop] button or ESC key to stop the animation.

You can modify animation by selecting the shape and move the control point of it.


Edit your animation to feel better. In the case of the sample animation you saw first, the animation was modified as the eye is moving and all fins are moving.

Step 47: Export Animated SVG

Click [File] on the menu bar > Click [Save as]

Click the file type [9VA/EVA] > Click [SVG] Select the folder to export SVG. Click [Save]. Now the animated SVG (SMIL(Synchronized Multimedia Integration Language)) file will be exported.

  • If you're a Macintosh user, Click [File] on the menu bar > Click [Export Animated SVG].

Step 48: Export Animated GIF

Click [File] on the menu bar > Click [Export Animated GIF].

Select the folder to export Animated GIF.

Enter the name of GIF file.

Click [Save]. Animated GIF setting dialog will appear.

Enter 2 (sec) into the [Time Limit] field.

Click [Start]. Now the animated GIF file will be exported.