I've recently been creating more Scalable Vector Graphics (SVG) animations and wanted to walk through my current process for creating SVGs. In particular I will outline how I created the below Sea Bear SVG. If you're not yet familiar with the SVG file format I'd recommend checking out my article on getting started with SVG animation.
- Find visual inspiration. I usually find a reference photo to use as inspiration for the SVG I'd like to create unless it's a more abstract concept. I also tend to start off my digital illustrations with one or multiple reference photos. I am currently working on developing different skills as an artist and use the photo as a visual guide for colors, anatomy and/or proportions. Some of my go-to places for inspiration are Pinterest, Unsplash, Pexels, Google Image, etc. The cool thing about Unsplash and Pexels is that the photos on those sites are generally directly attributable to a specific creator and allow reuse freely.
reference photo used for the bear relaxing in the water (attribution unknown)
- Create a sketch outline I find it helpful to take time to come up with a rough sketch before creating the final SVG. I generally create this rough sketch on my iPad in Procreate to have more control creating the shapes. This step in particular really helps speeds up the process for me in Adobe Illustrator.
reference or trace sketch in Illustrator or a vector -art based program to create SVG. I then will trace over my previous sketch using an Apple Pencil on iPad with the pen tool in Adobe Illustrator. If the image is less complex or proportions aren't as pertinent then I can more-so eyeball the initial sketch to convert it to an SVG and use it as a looser guide. Once I have the lines in Illustrator I adjust individual points along each path to ensure that the overall shape and quality of the lines is on par with the desired result.
Color the Vector. Once I am happy with the shapes in Illustrator then I begin filling in the colors to get closer to the final image. screenshot of the vector image version of the illustration in Adobe Illustrator on iPad
sketch out the animation timeline This was something Cassie Evan's recommended in her SVG animation workshop which I found helpful for better organizing more complex animations. This involves drawing different versions of the image at different points in timeline. I also note any visual changes I'd like to make during the animation that aren't reflected in a particular sketch (in order to have loose pseudocode to guide me as I animate).
a rough sketch showing how the eyes and water should change over time with the animation along with a note indicating the background color will shift as well
The pseudocode for my Sea Bear animation based on the above sketch looked like:
11) ripples animate in (opacity 0% -> 100%)22) ripples grow (scale 1.2) and rotate as paws rotate!33) bear eye sparkle moves around44) throughout steps 1 -> 3 the background color is changing slightly between aqua blue and a deeper greenish blue
I can use this information as a guide when implementing the code needed to animate the SVG.
- Clean up SVG for export. Once I have an animation plan it's time to clean up the SVG so that it is easier to programmatically change the values that are key to the animation. In Adobe Illustrator I make sure all of the layers are named as these layer names will be "id"s in the final exported SVG code and then I also group the layers in Illustrator in the groupings I'd like to animate them in. I then also used a tool like SVGOMG to do some clean up to optimize the organized SVG to simplify paths, ensure no images were embedded, etc. These optimizations should reduce the file size of the SVG and make it easier to work with programmatically. CSS Tricks has a good overview of resources for optimizing SVGs.
- Add the cleaned up SVG code to
HTMLtab in a new Pen on CodePen and started coding animation!
This article was published on April 13, 2021.