There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development.

In this article we’ll cover a few ways of using SVG sprites to describe motion on the web. I’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.

Technique #1: Complex Responsive Animation With An SVG Sprite

Most of us have been using sprites for development for a long time now: using SVG in a sprite is not new business. This article by Ilya Pukhalski breaks down Joe Harrison’s responsive icons technique in a very impressive way. In this first example we’ll take it one step further and use SVG sprites not just for iconography, but for complex, fluid animation as well.

Animation has soared in popularity this year due to increased browser support for animations and user experience benefits of movement that supports content. But until now, we have not thought about this medium in the same way we have about so many other design concepts that shift for different screen sizes. Even if the animation is complex, we can still get the most bang for our performance buck while still catering to our users’ needs.

Responsive web development adapts content for different displays for so many elements of UI interfaces. Animation can modify with the same considerations as the typography and layout, adjusting to the viewport and clarifying the design.

In this example, I’ve made a modern day Book of Kells initial illustration to show a complex animation in the context of page content. First, I’ve made three different designs based on small, medium and large viewports.

I use this as my map for the rest of the project and refer to it often. Other people plan differently, working in the browser or making sketches. Choose the method that makes you most productive.

GROUPING AND DRYING IT OUT

Now that we have a map, we can start reducing the repetition of elements. We identify the shapes that the first and second versions have in common so we can reuse them. A class can be assigned to the rect in the background and so that we can change the fill using a media query. All the objects are named and grouped for easy reference, such as “mountains”, “bridge” or “tower”.

We’ll also put a class on all detailed shapes, such as building windows or bridge ropes that will be removed in the medium screen size. Any group that’s too different to modify, we put together in a larger group that we can then hide or display. If the first illustration is kells_1, the group particular to the second illustration is kells_2, and the last is kells_3. In order to make the whole SVG similarly scalable to the same container values, the last illustration becomes the same size as the first.