openclip-svg.jpeg

This article shows six steps to make SVG animation from Openclipart by the use of a free vector animation editor.

The article "Make animation from Openclipart's SVG with Raspberry Pi" also explains how to make animation .

What is 9VAe ?

  • Unique free 2D animation software which can export SVG SMIL animation .
  • Based on 2D keyframe animation such as Synfig Studio.
  • Lightweight and stable. It can work well even on RaspberryPi a board computer.
  • It can export alternative movie such as Animated GIF / APNG or QuickTime (Macintosh).

You can download 9VAe from the links as follows;

Download (Click Untitled.png)
9va-win (Windows)
9va-mac (Macintosh)
9va-pi (Raspberry Pi)
9va-pi (Ubuntu/Linux Mint (LinuxX86-32bit))
See 9VAe Download and Install.
  • If you can't run 9va-mac, check the Gatekeeper setting in System Preferences > Security & Privacy > General > "Allow applications downloaded from:".

What is Openclipart ?


Preparing : Import SVG from Openclipart

For example, import SVG "Cartoon shy kid :220590" from Openclipart

01orginal.png

  1. Open SVG "Cartoon shy kid :220590" from Openclipart
  2. Click right mouse button on [DOWNLOAD] button. > Click 'Save Link As' in the menu. (The menu item will be different according to your browser.) > Click [Home]. Double click [Desktop]. Click [Save] button.

Now SVG file "shy-kid.svg" will be saved on your desktop.

  1. Run 9va-win, 9va-pi or 9va-mac
  2. Click [File] on the menu bar > Click 'Open'. Now Open File Dialog Box will appear.
  3. Click [Home] > [Desktop] > Click on [shy-kid.svg]. > Click [Open].
  4. Then the message "Some Data couldn't be converted. (Pattern)" will appear.

This message occurs because 9VAe doesn't support Pattern object.

Click [OK] button.

  • 9VAe will import Pattern or Filter objects as half transparent objects. These objects will be changed to Pattern objects manually at the end of this article.

Step-1: Ungroup and reclassify according to animation

In the static SVG, some shapes will be grouped together. But, the group doesn't defined as they move together. So you have to ungroup the shapes and regroup them according to the animation .

02group.png

  1. Click the shape(A) > Hit Command+Shift+G Key(Mac) or Ctrl+Shift+G Key(Windows, Ubuntu, RaspberryPi) twice (Ungroup x2). Now you can select the shape separately.

  2. You can zoom in and out by using your mouse's scroll wheel or click the [+] and [-] button(G). Click the [Magnifying glass] button to reset zooming(G).

  3. Click the left arm (B) and select it.

  4. Click [+] button (C). Now the selected arm will be registered in the time control panel (D).

  5. Click on the registered button (D) > Click 'Hide'. Now the left arm will be hide.

  6. Click the shape which belongs to the left arm (E) and select it. Click on the left arm registered button (D) > Click 'Add to Time Group'. Now the selected shape will be hide.

  7. Repeat the same operation until all parts of the left arm will be hide.

  8. Click the right arm (F) and select it.

  9. Click [+] button (C) of the Time Control panel. Now the right arm will be registered in the time control panel.

  10. Click on the right arm registered button > Click 'Hide'. Now the right arm will be hide.

  11. Click the shape which belongs to the right arm (F) and select it. Click on the right arm registered button > Click 'Add to Time Group'. Repeat the same operation until all parts of the right arm will be hide. Click the face and register it.

  12. Repeat the same operation until all parts of the face will be hide.

  13. Click [o] button (H) on the lower right side of the Time Control panel . Now the hidden shapes will appear.

03group.png

In the first step, the face, the right arm, and the left arm are classified into the three groups on the Time Control panel.


Step-2: Make AnimeCast which rotate or move along the path

What is AnimeCast?

AnimeCast is a reusable object of 9VAe animation. It is like Symbol or MovieClip.

  • Each AnimeCast has it's own time independently.
  • AnimeCast can rotate and move along its motion path.
  • AnimeCast can be nested.

How to make AnimeCast?

04acast.png

  1. Click the registered button of the face (A) > Click 'Select'. Now the face will be selected.
  2. Click [x] button of the clip memory (B). Now the face will be removed and put into the clip memory.
  3. Click [9] button of the clip memory (C).
  4. A dialog box will appear. Enter the Animecast's name “face” into the text field. > Click [OK]. Now the face will appear.
  5. Click the registered button of the right arm (E) > Click 'Select'. Now the right arm will be selected.
  6. Repeat the same operation above. Make the right arm AnimeCast named "right". The AnimeCast will appear on the dark green scarf.
  7. Click on the [Lower] button (right of D) several times. Lower the right arm AnimeCast under the dark green scarf. If you want to raise it again, click [Raise] button (left of D).
  8. Click the registered button of the left arm (F) > Click 'Select'. Now the left arm will be selected.
  9. Repeat the same operation above. Make the left arm AnimeCast named "left". The AnimeCast will appear on the dark green scarf.
  10. Click on the [Lower] button (right of D) several times. Lower the left arm AnimeCast under the dark green scarf.

Set the Root Point of AnimeCast

AnimeCast involves two rotating axis. One axis is fixed to the center of the AnimeCast and the other axis is movable. The movable axis is called 'Root Point' in 9VAe. At the first time, the Root Point is at the same position as the center axis.

In this example, the Root Point of the right arm and the left arm should be moved to each shoulders. Then you can rotate them aroud each shoulder.

05rootPnt.png

  1. Click the right arm (A) and select it.
  2. Click the center handle [+] of the selection frame (B) > Click 'Move Root Point'(C). Now the green Root Point will appear at the center bottom of the AnimeCast. A blue line will also appear between the green Root Point and the center of the AnimeCast.
  3. Drag the green Root Point to the right shoulder.
  4. Click the left arm (D) and select it. Repeat the same operation above, drag the green Root Point (E) to the left shoulder.

The result is shown as follows. A blue or sky blue line is drawn between the green Root Point and the center of the AnimeCast.

06rootPnt.png

  • The sky blue line shows that the AnimeCast's angle around the Root Point axis is a minus value.

Step-3: Copy to the next page and change it

The basic expression of SVG SMIL animation is "< animate from=AAA to=BBB dur=CCC". 9VAe can make these elements as follows. The object AAA is on the first page. You can copy it to the next page and change it (BBB). You can set the time(CCC) from the first page to the next page.

You don't have to draw any frames between AAA and BBB. The computer will make them automatically. This method is called 2D keyframe animation. Let's make the arm moving animation.

Change the angle of AnimeCast

07nextPage.png

  1. Click [+] button (A). > Click 'Add Next Page'(B). Now the second page will appear on the page bar.

08rootAngle.png

  1. Click the right arm (C) and select it.
  2. Click the center handle [+] of the selection frame(D) > Click 'Rotate around Root'(E). A dialog box for input angle will appear.
  3. Enter a value obtained by subtracting about 6 from the original value. Now the AnimeCast will rotate 6 degrees anti-clockwise around Root Point. Because the time of the page is set to one second, the right arm will rotate 6 degrees in one second.
  4. Click [Play] button (F). You will see the arm rotating animation.
  5. Next, click the left arm to select it.
  6. Click the center handle [+] of the selection frame > Click 'Rotate around Root'.
  7. Add 6 degrees to the angle around Root Point of the left arm. Now the both arms will rotate towards inside.

Change shapes of AnimeCast contents

You can change the shapes and add anmation to the contens of AnimeCast. Try to make the face expression animation.

09face.png

10face.png

  1. Click on the bold text "shy-kid.svg" (A). Now the list of AnimeCasts will appear.
  2. Click ':face' (B). Now the content of the AnimeCast "face" will appear.
  3. Click the [+] button at the end of the page bar (C) > Click 'Add Next Page' (D). Now the second page will appear on the page bar.

11face.png

  1. Drag a rectangle around the face and select all shapes. (You may hit Command+A (or Ctrl+A) to select all.)
  2. Click the center handle [+] of the selection frame (E) > Click 'Rubber Transform' (F). Now the face expression will change according to your mouse movement.
  3. Move mouse toward lower a little. Click the mouse button when the face becomes desired expression.
  4. Click [Play] button (G).
  5. If your animation isn't good, click [Undo] button (I).
  6. If you click on the [Edit points] button (H), control points will appear. You can drag control points to change face expression.

9VAe has various transforming function such as "Rubber Transform". Try to click every handles around the selection frame, you will see the various transforming function as follows.

  • "Resize", "Resize and Rotate", "Rotate" are in the corner handle menu.
  • "Strech", "Bend", "Wave Transform", "Perspective", "Rubber Transform", "Mirror", "Thin" are in the side handle menu.
  • "Rubber Transform" in the center handle menu.

Step-4: Add Turn, Loop and set Time

9VAe has two loop commands "Loop" and "Turn". The loop command should be put into the first page as follows.

12face.png

  1. Click the first page (A). Now the first page will appear.
  2. Click [Input] on the menu bar (B) > Click 'Turn'. Now the Turn command will appear.
  3. Click [Play] button (C) . You will see the face expression changing animation.
  4. Click [Stop] button or ESC key to stop the animation.
  5. Click the page time (D) to change the time between the first page and the second page.

Return to the main from AnimeCast

13return.png

  1. Click on the bold file name (A) > Click 'Return'(B). Now the main animation will appear.

Input the Turn command on the first page of the main animation.

14turn.png

  1. Click the first page (A). Now the first page will appear.
  2. Click [Input] on the menu bar (B) > Click 'Turn'. Now the Turn command will appear.
  3. Click [Play] button (C) . You will see the animation.
  4. Click [Stop] button (D) or ESC key to stop the animation.

Step-5: Correct stacking order of non-overlapped shapes

Stacking order of non-overlapped shapes

When you play the animation, you may find the bad stacking order of the shapes in the animation.

The following figure shows the zoom up of hands on the second page. The bad stacking order is that a vertical line and some shapes on the cloth is upper than hands.

15stuckerr.png

The following figure shows the zoom up of hands on the first page. The stacking order of the original SVG is good. The vertical line on the cloth isn't overlapped on the hands.

16stuckerr.png

That means, you have to correct the stacking order of non-overlapped shapes in the imported SVG. Because the stacking order of the first page is used in the repeating animation from the first page to the second page.

Lock to avoid selecting unwanted shapes

When you want to correct the stacking order of the vertical line and some shapes on the cloth, you have to select them at first. But it's difficult to distinguish them from the other shapes around them. Use register tool and 'Lock' for easy selection as follows.

17stuckerr.png

  1. Click the first page. You have to change the stacking order of the first page.
  2. Click on the right hand (A) and select it.
  3. Click [+] button of the Time Control panel (B). Now the right hand will be registered (C).
  4. Click on the right hand registered button (C) > Click 'Lock'. Now you can't select the right hand while it is locked.
  5. Click on the clothes (D) .
  6. Click on the right hand registered button (C) > Click 'Add to Time Group'. Now you can't select the clothes while it is locked.
  7. In the same way, add the left hand and trousers(E) to the right hand registered button (C). Now you can select the vertical line and some shapes (F) easily.
  8. Drag a rectangle around some shapes on cloth (F) and select them.

Change the stacking order of non-overlapped shapes

18stuckerr.png

  1. Select the shapes at the bottom of the vertical line (F).
  2. Click on the selection frame (A). Or click the center handle [+] of the selection frame > Click 'Move'. It is important to Click. Do not Drag.

Now selected shapes will move according to your mouse movement. Their position won't fix until you click your mouse. They will return to the original position when you move your mouse outside.

You can move and overlap them to any other shapes, and you can change the stacking order of them by using the right and left arrow keys. Hit Right Arrow key to raise the stacking order, and hit Left Arrow key to lower it. Hit Shift + Arrow key if you want to raise to top or lower to bottom.

Check and correct the stacking order of the vertical line and hands as follows.

19stuckerr.png

  1. Move mouse and move the the vertical line (A) to overlap the left hand.
  2. Hit Left Arrow key or Right Arrow key to correct the stacking order of the the vertical line (A).
  3. Move your mouse outside the screen then the vertical line will return to the original position.
  4. Click [Play] button (B) and check the stacking order of the animation.
  5. Click [Stop] button (C) to stop it.
  6. Click [o] button (D) to unlock the clothes or hands.

In this way, you need to correct the stacking order of non-overlapped shapes when you make an animation from static SVG.


Step-6: Export SVG and modify it

Macintosh

  1. Click [File] on the menu bar > Click 'Animated SVG Export'.
  2. Enter the name of SVG file. Click [Save]. Now the SVG animation will be exported.

Windows / Ubuntu / Rasperry Pi

  1. Click [File] on the menu bar > Click 'Save as'
  2. Click the file type [9VA/EVA] > Click [SVG]
  3. Select the folder to export SVG. Click [Save]. Now the SVG animation will be exported.

Inside 9VAe's animation SVG

The structure of animation SVG exported by 9VAe is shown as follows.

    <!-- Generator:9va-0.2.11 (9va-mac) http://www.d1.dion.ne.jp/~danjiro/9va/ -->
<svg>
  <defs>
  <g id="AC_right_a94" ><!--AnimeCast right-->  </g>
  <g id="AC_left_a93" ><!--AnimeCast left-->   </g>
  <g id="AC_face_a92" ><!--AnimeCast face-->  </g>
  </defs>
  <g id="SVG_Start">  </g>
     <!--Main animation-->
  <g id="SVG_End">
     <!--Still for IE-->
  </g>
  <g id="SVG_Outside">
  </g>
</svg>

  1. The header shows the SVG generator's version.
  2. The elements from <defs> to </defs> are the definitions of gradation, background, AnimeCast...
  3. The elements which begin with <g id="AC_ are the content of AnimeCast.
  4. The elements from <g id="SVG_Start"> to <g id="SVG_End"> describe the main animation.
  5. The elements from <g id="SVG_End"> describe the static image for Internet Explorer.
  6. The elements from <g id="SVG_Outside"> are the black frame.

Add Pattern

9VAe doesn't support Pattern or Filter. 9VAe imports Pattern or Filter objects as half transparent objects.

This section shows how to replace from half transparent objects to the original pattern objects in the exported SVG.

Open the original SVG with a text editor, then you will see the pattern is defined as follows.

    <defs
     id="defs4">
    <pattern
       inkscape:collect="always"
       xlink:href="#Checkerboard"
       id="pattern5786"
       patternTransform="matrix(10,0,0,10,0,0.41338583)" />
    <pattern
       inkscape:stockid="Checkerboard"
       id="Checkerboard"
       patternTransform="translate(0,0) scale(10,10)"
       height="2"
       width="2"
       patternUnits="userSpaceOnUse"
       inkscape:collect="always"
       inkscape:isstock="true">
      <rect
         id="rect5129"
         height="1"
         width="1"
         y="0"
         x="0"
         style="fill:black;stroke:none" />
      <rect
         id="rect5131"
         height="1"
         width="1"
         y="1"
         x="1"
         style="fill:black;stroke:none" />
    </pattern>
  </defs>

This shows the element id="Checkerboard" defines the pattern of the scarf. Copy the text from <pattern id="Checkerboard" to </pattern> and paste it after <defs> of the exported SVG animation. Remove inkscape's keyword listed below, because they will be errors in 9VAe's SVG. Be careful not to remove ">".

  • inkscape:stockid="Checkerboard"
  • inkscape:collect="always"
  • inkscape:isstock="true"

Next, search the word "fill-opacity=" which describes half transparent, then you will find them at four places. The first two places are nearby and they are after <g id="SVG_Start"> ( in the main animation. ) The last two places are also nearby and they are after <g id="SVG_End">, that means they are in the static image for IE. So, these four elements should be the scarf.

Look at the first element in the exported SVG.

    <path fill="#000000" fill-opacity="0.50" stroke="#44aa00">
    <animate repeatCount="indefinite" keyTimes="0;0.5;1" begin="Sa.begin+0.00s" dur="2.00s"  attributeName="d"
      values="M267.12,542.25....
         ;M267.12,542.25...
         ;M267.12,542.25...."
  </path>

Replace the text fill="#000000" fill-opacity="0.50" with the text fill="url(#Checkerboard)". Now the fill color of the scarf will become the Checkerboard pattern which was added to <defs>. Repeat the same replace operation to the other three elements.

Check the SVG animation with browser

Open the SVG file with browser (Firefox, chrome ...), then you can check if the scarf has checkerboard pattern or not in the animation. If you open it with IE, you will see the static image.

If the browser show error message, check the SVG text.

  • Keyword "inkscape:" remains. > error
  • The character ">" was removed. > error

Remove Black Frame

9VAe exports the black frame at the end of SVG animation. If you don't need them, remove the element from <g id="SVG_Outside"> to </g>.


Final Words

This article explained six steps to make SVG animation from static SVG by using the example "Cartoon shy kid :220590" from Openclipart.

  • Step-1: Ungroup and reclassify according to animation
  • Step-2: Make AnimeCast which rotate or move along the path
  • Step-3: Copy to the next page and change it
  • Step-4: Add Turn, Loop and set Time
  • Step-5: Correct stacking order of non-overlapped shapes
  • Step-6: Export SVG and modify it

Step-1, Step-2, Step-5 are the steps to change the structure of static vector graphics to the animating vector graphics. Step-3, Steep4 are the steps to add the animation to the static vector graphics. Step-6 is the final step to modify SVG text directly.

Surprisingly there is no picture drawing step. You can make animation without drawing by using Openclipart's sharing SVG!

The following animation is a final version.

Thanks for Openclipart and Dog99x the writer of Cartoon shy kid.

I hope this article will help you to make SVG animation. Thank you for reading!


Related article

9VAe Introduction

  1. 9VAe Free SVG/GIF Animation editor: Introduction
  2. 9VAe Download and Install

9VAe Beginner Tutorials

  1. 9VAe Beginner Tutorial 1 - Overview
  2. 9VAe Beginner Tutorial 2 - Input, Select, Move, Resize...
  3. 9VAe Beginner Tutorial 3 - AnimeCast, Time
  4. 9VAe Beginner Tutorial 4 - Edit AnimeCast, Loop
  5. 9VAe Beginner Tutorial 5 - Time Curve, Copy Pages, GIF
  6. How to make a long animation with 9VAe

9VAe Next Step Tutorials

  1. How to make APNG from SVG for LINE animated Stickers?
  2. Make Barrel Fish animation from Openclipart SVG
  3. Six steps to make SVG Animation from Openclipart
  4. How to make Animated GIF from Openclipart?

9VAe Animation Examples

  1. 9VAe's GIF/SVG Animation examples in Openclipart

9VAe Technical Information

  1. Export Animated GIF in 9VAe

2,325 0 0