But first, what is an SVG?
Short for scalable vector graphic, an SVG is image format based on XML, which is frequently used in web design. SVG’s are popular for their scalability (they do not lose quality regardless of the resolution), responsiveness (they resize naturally to any size), and ability to create dynamic animations. In this tutorial, we’re going to focus on the latter.
My preferred software for creating and editing SVG’s is Adobe Illustrator, but there also plenty of free vector-based applications, for example, Inkscape and browser-based Boxy SVG.
There are a ton of great resources that go into detail on how an SVG works, such as this article by Jake Archibald. For now, we're going to focus on building the CSS animations.
We’ll start with a simple SVG path, below.
Breaking Down the Animation Properties
To break down the animation, stroke-dashoffset specifies the location on the SVG path where the dash of a stroke will begin. Since we selected ‘0’, the animation begins at the very start of the path. When we call the animation, 2s defines the duration of time it takes for the animation to complete. Linear means the animation will start at the first point, continue to the next, then come back to the first. Our last attribute, forwards, tells the animation to keep the style values of the last keyframe. If we change the attribute to the opposite value, backwards, our path would disappear after animation.
To keep the animation running in loop, we can add an animation-iteration-count property of infinite, demonstrated below. We can also create a dashed line by changing the stroke-dasharray value- a smaller value will create a smaller dash.
By using these same basic principles, we can layer more complex SVG paths, as well as add in a fill animation, for a more interesting composition. You can see the simple add-ons demonstrated in the Activator Studios logo below.
SVG Animation Use Cases