My First SVG Animation

Let’s do this.

5 min readFeb 6, 2015

Scalable Vector Graphics is widely used now because of it’s scalability, small file size, and browser support. Unfortunately, I haven’t experimented much with SVG animations and usually rely on CSS keyframes instead. I think I was too intimidated to try it because I didn’t know where or how to start.

Cue the dramatic music

Today, I will change that.

I feel there are many well written articles with a lot of detail, but I wanted to find something a beginner could understand. This article written by Chris Coyier helped me understand the basic idea of what to do, but I did run into small issues and decided to write another one.

Objective

Click on a filled shaped (rectangle) to morph into another shape (triangle).

Tools

Illustrator CS5 (version I am using)
CodePen.io (or you can code locally)
General knowledge of HTML and CSS

Total Time

Approximately 15 minutes or less.

Step 1: Setup

Open up your IDE of choice. I will head over to CodePen.io since it is the quickest way to start and share a project.

In the body of your document, add the following code:

<svg viewBox=" ... ">
  <polygon fill=" ... " points=" ... ">
    <animate begin="click" attributeName="points" fill="freeze" dur="800ms" to=" ... " />
  </polygon>
</svg>

If you break it down, you basically have your opening and closing svg and polygon tags and an animate tag with attributes. The sections of the code with ellipses will be filled in by us.

If you are curious about the attributes in animate, here are the basics:

begin="click"

Start the animation when you click it

attributeName="points"

Animate the points of the shape

fill="freeze"

Stop the animation when complete

dur="800ms"

How long to make the animation

If you would like to learn more animate attributes, this article may help.

Step 2: Draw a Rectangle

Time to design! In Chris’s article, he mentions to start with the most complex shape first so you have more points to move around and animate. I will start with a rectangle since it requires more points than a triangle.

Next, add a point to the top-center of the rectangle using the pen tool. This will be the tip of your triangle.

Step 3: Get Coordinates

Next, go to File > Save As (change your format to SVG), and select Save. Do not worry about the file name, or location. You will now get a dialogue box similar to this.

Select Show SVG Code…

You will now see something similar to the image below open automatically in your system’s text editing tool.

Step 4: Adding Code

If you read through the code, you will notice a line that says viewBox with four different numbers in quotes.

Copy and paste those numbers to your HTML document:

<svg viewBox="0 0 240 300">

Next, copy and paste the attributes for the polygon:

<polygon fill="#1EBCA1" points="240,300 0,300 0,0 120,0 240,0">

Now, you should see something similar to this:

<svg viewBox="0 0 240 300">
  <polygon fill="#1EBCA1" points="240,300 0,300 0,0 120,0 240,0">
    <animate begin="click" attributeName="points" fill="freeze" dur="800ms" to=" ... " />
  </polygon>
</svg>

We are more than half way there! We have just added the document size (240x300), the shape’s color (#1EBCA1), and the plotted points which make the rectangle.

We have only one more set of coordinates to plot, which will be our triangle.

Step 5: Draw a Triangle

Go back to your Illustrator document and cancel out of the dialogue box if you have not done so. Using the same document, select each point at the top left and right corner but do not select the center point we added.

Move those two points to the bottom of the rectangle to form a triangle:

Now repeat step 3 to get the coordinates. A new document will appear with different coordinates.

Step 6: Adding Code, Again

As you did in step 4, copy and paste the new points, but add them to animate.

<animate begin="click" attributeName="points" fill="freeze" dur="800ms" to="240,300 0,300 0,300.053 120.121,0.053 240,300.053" />

Your final code:

<svg viewBox="0 0 240 300">
  <polygon fill="#1EBCA1" points="240,300 0,300 0,0 120,0 240,0">
    <animate begin="click" attributeName="points" fill="freeze" dur="800ms" to="240,300 0,300 0,300.053 120.121,0.053 240,300.053" />
  </polygon>
</svg>

One final thing you will need to do is specify your SVG size in your CSS:

svg{
  width: 240px;
  height: 300px;
}

Step 7: Test

That’s it! Now the fun part. Preview your document in your browser and test your animation. If you have problems, I have my pen posted here for demoing.

For Me To Learn

How to click my animation once more and have it reverse the animation.
How to have it morph into a circle from a triangle.
How to morph outlines only.

I hope this article has helped you overcome your fear of starting off with SVG animations. I feel once you start learning how to do it, you will dig deeper and deeper to understand how things work.

I look forward to any comments on how to do this in an easier fashion!

Additional Resources (Thank you Tiffany Higa)