The first step to animating an SVG is to figure out what you want to animate. This might seem obvious but I get asked all the time where I come up with ideas to animate and how I create the SVG’s I use. So I am going to break down my process a little.
Inspiration
A few places I look to if I want an idea for animating:
CodePen Challenges:
These are weekly prompts that give you a starting point for something to animate.
Dribbble:
There are a lot of amazing designs on dribble. Some are even animated if you want to try your hand at recreating them. Be sure to credit the original artist whenever you are recreating something from the web!
Pinterest:
This might seem silly but I find all kinds of inspiration on Pinterest. One of my most popular pens on CodePen came from inspiration I found on Pinterest.
Original image
And my animation
Creating Your SVG
Once you find your inspiration it’s time to make your SVG. There are many different programs for creating and exporting SVG’s. I use Affinity Designer the most. This will also work in Adobe Illustrator, InkScape, or any other program that has basic shape tools and a pen tool.
The first thing I do is grab an image of whatever I am trying to create. On my Mac I usually take a screenshot of the image and then put it in Affinity Designer. I add a layer on top of the image (this will help determine the size of my svg. viewbox) and set an opacity to it so I can still see the image underneath. You can read more about SVG viewbox here
This is the point where the pen tool becomes your best friend. Creating an SVG can be as easy as "tracing" over your image with the pen tool.
I trace different paths on the image and then fill in the colors with color picker.
If you want a more detailed explanation, this is a good tutorial on YouTube where I learned to do this.
For the phoenix example I didn't name any of the paths I created. But for other SVG's I usually name any path I might want to animate. So if the SVG had an arm or eyes I'd want to animate I would give each of those elements a unique ID in the editor. I also group paths. In this example I give the foot a unique ID and group the individual paths of the foot together. When I export the SVG these ID's and groups will be exported in the code.
If you look at my animation you can see the whole right foot animating together. We will talk more about actually animating the groups and individual paths in my next post. For now just know that grouping paths together and giving them ID's in your editor can make animating the SVG a lot easier.
Exporting and Optimizing
The final step before I start animating is to export and optimize. I export as an SVG. In Affinity Designer this is pretty simple. I select the whole image and then go to file and click Export. I choose to export as an SVG with background (this helps with having a larger viewbox to animate in.)
After exporting I grab all of the SVG code and put it in SVGOMG
I like using SVGOMG because I like being able to see what my SVG looks like as I toggle different settings.
There are a lot of toggles in SVGOMG. One of the features I make sure I toggle on is Prettify markup. This makes it a lot easier to read your code when you go to animate it. Something I make sure to toggle off is Clean ID's. This would get rid of all the ID's I added to my groups to animate.
After you download your now optimized SVG you are ready to animate! In my next post I will show you how to get started animating SVG's with GreenSock.
Top comments (0)