Animate SVG – How to create a path in SVG

This is going to be a short series of posts about on how to animate SVG. We start of basic and get more advanced later on. I don’t know how long it is going to be, also if I am going to post them in one sequence or break them up and mix some other posts in as well. We’ll see. I am starting this series because I recently had the challenge to do this for my work, I had fun figuring out what I needed to make this happen and it appears that there are several rules to follow. Or else it won’t work as you expect. This post is also been inspired by the Playstation 4 review of Polygon. It has such great drawings and it just fits in the theme.

Creating the SVG

There are several ways of creating a SVG. There are online services (Janvas seems ok, although I have no personal experience with it) and multiple software packages capable of creating vector art and saving it as an SVG. I will be using Adobe Illustrator, it is the most commonly used Vector Art program, but it ain’t cheap. This is also why I am using an older version of Illustrator (CC 2015). It is still more than capable of creating SVG’s, but it may lack some of the newer features. Creating the SVG isn’t that hard. Just create a shape you want, make sure you use only strokes. For this example I will use a simple stroke.

Trim the artboard

When you are done creating your shape, you need to trim the artboard around your drawing.
You can do this by going to Object > Artboard > Fit to Artwork Bounds. You can find the menu options “Object” in the top menu.

Set the fill to transparent

Make sure the background color is set to transparent of the object. Select your object with the filled in mouse pointer. It should look like this: 

Having selected your object, you can now go to the top left corner of the screen and select a background color. Click on the little arrow next to the color. The screen that will pop out might not look the same as mine, but the icon hasn’t changed as far as I know. If so please leave a comment to let me know.

Select the little white box with a red line going through it diagonally. Now the “Fill” is transparent. We only want the outlines as otherwise it will break the illusion of drawing the lines on the screen. As the fill is not animated in our tutorial.

Save the file as SVG

Now go to the file menu and select “Save as”. In the drop down window at the bottom you can select SVG as a file format to save to. It should look like this. Again, this might look different, but the option should be there. You can accept the next screen as is.

Congrats, you now have a SVG that might be use able. Or not, we are going to find this out.

Make sure the SVG is set up correctly

The challenge I faced was creating a SVG that was set up correctly for me to animate it. Now I have to be honest, everything I type here is what I found out along the journey. Some stuff might not be the best way to do things, but it works for me for now. Maybe I’ll revise it later on with new made discovery’s. Anyway, to animate a SVG’s stroke you need a <path> element in the SVG’s source code. You can open the saves SVG up in any editor capable of showing code. Like Notepad++ or Sublime Text for example, I prefer Sublime Text myself. A <path> element needs to have several attributes, for instance an fill=”none” attribute, stroke=”#000000″  and stroke-width=”3″. The values are up to you, but you may want to keep the fill set to none. Now open up the SVG in a browser, whichever you have installed and is a modern browser, for example Chrome. If you can see the strokes you have created earlier we are good to go. Like I mentioned before, for this example I will be using a straight line to keep it simple.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 379 1">
<path id="line" fill="none" stroke="#000000" stroke-width="3" d="M0,0.5c0,0,39,0,95,0s284,0,284,0"/>
</svg>

It should look like this in your browser if you have used my example above:

See the Pen SVG stroke in path element by Skippy (@Skippy) on CodePen.dark

What the F* did I do wrong?

If you are like me, then you might have thought “haha this is going to be easy, I’ll have that SVG in no time”. Well I was wrong, every SVG I created either had a <polyline> or <polygon>  but no <path> was ever created. Until I learned that you needed a more complex form. The trick is to add an extra point to your shape, then get this tool out  of the tool shed and click and hold on the newly created point. Drag the tool out and make sure it snaps into place straight with the other line.

The shape should not be altered in any way if you do this correctly. But this extra special point now fixed our problem. If you save the file again as an SVG. The element created should now be a <path> .

Rules of animating a line

Like I said before, you cannot animate the line without the proper settings. I’ll sum them up here:

• Make sure the element is a path.
• Set the fill attribute to none.
• Have a stroke on the element.
• Make sure the stroke color is set to a different color than the background it is going to be used on. (learned this the hard way)
• Set a meaningful id or class on the element and SVG tags. This is used to target it with our JavaScript.

How does animating a line work?

Animating the stroke of our SVG object is done by changing the value of the of the stroke-dashoffset attribute. I’ll post a more lengthy post about this later in the series. For now, take a look at the example. It should give you a good view on how you could use this to animate your art.

See the Pen SVG stroke in path element with animation by Skippy (@Skippy) on CodePen.dark

EDIT: Part 2 of the series is now online. Read it here