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.
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.
With small tweaks to the timing properties, animations can be used in a variety of ways, it's just a matter of getting creative! Movement can take place on page load and then stop, it can be continuous on loop to add emphasis to a certain section, or it can be triggered by a user action, such as hover over- all without the use of Javascript! Use our code snippets as a springboard for your designs and show us what you come up with!
