Before you start, you might wonder which animation technique is the right one for the job? Always think about the (or ask for precise) requirements first. Sometimes a video is just fine, even if it doesn’t scale to the device’s screen size. Sometimes animations should be subtle - recreating the effects with SVG could be overkill and simple DOM & CSS based animations are the way to go. Let's see which thoughts go into making this decision in the following sections.

Before we get to that, let's first look at what we'll create. Behold! A multi-stepped animation of a rolling ball:

Ways of animating on the web

Video

Pros: Animation can be very complex
Cons: There is no interaction and it is not resolution independent.

CSS

Pros: Good performance and 3D transforms are supported.
Cons: Limited bezier easings, motion path not (yet) supported.

Canvas

Pros: Fast and interactive.
Cons: Not resolution independent (canvas is bitmap based) and complex

WebGL

Pros: 3D capable and hardware-accelerated.
Cons: Difficult to make responsive.

So, why SVG?

SVG stands for Scalable Vector Graphics. Every bit of visual information in an SVG file is defined by human-readable code. Since SVG is XML based, you can animate virtually all aspects of it with CSS.

Besides the capability to be animated, there are some other good reasons to choose SVG:

1. They are scalable and can be resized in a browser without any loss of quality.

2. They can be compressed to almost ridiculously small file sizes when compared to similar bitmap images which results in a much better overall performance.

3. There are less HTTP requests to handle (inline code).

4. Text in SVG is selectable and can be copied.

5. They can be made accessible because screen readers, search engines, etc. can read their code.

6. SVG images can interact with the DOM, CSS and JavaScript.

Check out the following documentation if you struggle to understand SVG code: SVG basic shapes

Make notes first

As a first step, bring your ideas to paper. Think of all the elements you need for your animation and how you want them to behave. You will save yourself a lot of time if you have a storyboard ready as you are coding.

In bigger projects it makes sense to create high fidelity storyboards or even prototypes. This allows you to better discuss them with your clients, fellow designers and frontend-engineers.

Choose the right tool to create and export your SVGs

If you want to animate SVG efficiently it is essential to have clean and human-readable SVG code. Depending on the tools you are using it can be hard to get the files exported the way you pictured them in your shiny dreams. Sketch’s code for example can get really wild and adventurous.

To be able to present you with an example for this article, I drew a simple ball with a dashed stroke in Sketch:

Sketch exported this code:

Our circle element was converted to a path. This is not ideal. We can write that SVG code a lot simpler:

Unfortunately, I did not find any vector graphics tool that directly strips away unnecessary code which bloats your SVG’s file size. However, Illustrator seems to be one of the best solutions out there for the purpose of exporting SVG code.

If you do have any recommendations, please let us know @gridonic.

Optimise your SVG code

A good starting point for optimising SVG is SVGOMG. SVGOMG is a website where you drag & drop your SVG and get an optimised version of it. It uses svgo, which you can also use in the terminal of your choice or as part of your build process. You can play around with the options, but be careful - there are some settings that can make some radical changes to your code. Make sure to always check the optimised code carefully.

There is also a plugin for Sketch called SVGO-compressor. This plugin is super helpful when working with static images. But as soon as you build your animation-base and want to work with Sketch, I highly recommend to turn this plugin off and optimise the file manually on SVGOMG.

Animate things

SVGs can be animated by adding classes or IDs to the elements in their source code and then using simple transforms or keyframes via CSS. For simple animations a pure CSS approach is just fine. It is lightweight, simple and straightforward to implement.

Let's look at an example of a simple animation made with CSS keyframes. You can view the animation and the HTML/CSS source in the following Pen.

When it comes to more complex animations with multiple steps there is usually no way around JavaScript. JavaScript comes at the cost of either writing really complicated code by yourself, or with the overhead of a library to help you. But once you are up and running with a library, the syntax can be really nice and performance can actually be outstanding.

Known libraries are Snap.svg, GreenSock (GSAP) or anime.js. For animations with multiple steps, I like to use GreenSock (GSAP) or anime.js. Both are very easy to understand and provide great functionality to create timelines. Based on my experiences Snap.svg is not ideal for animations with a timeline. It's more like a "jQuery for SVG".

See the same animation as before in the following Pen. This time implemented with GreenSock.

In this particular case it is of course overkill to use a JavaScript library. But as soon as your animation is set up with a library, it gets a lot easier to chain multiple steps on a timeline.

Let’s take a look at such a multistep animation in the next Pen. Implemented with GreenSock again.

That’s it – the code looks simple and organised. Now imagine how far you can go with that and even add some interaction to it.

All in all

Make scribbles on paper and create a storyboard. Optimise the SVG file as good as possible. If the final animation contains less than three steps, it is usually possible to go with pure CSS. For multistep animations, I suggest to stick to a library such as GSAP or anime.js. There are also other ones like SVG.js or BonsaiJS that you can try out. Most libraries will take care of browser differences and provide fallbacks. This will save you a lot of time.

I hope this article gave you some insights and provides a good starting point for you to get into animating with SVG. If you have any feedback or input I’d love to hear from you: hello@gridonic.ch

Handy resources

SVGO's Missing GUI
GreenSock Documentation
SVG can do THAT?!
A Compendium of SVG Information
High Performance SVGs
SVG Animations – From Common UX Implementations to Complex Responsive Animation
A Practical Guide to SVGs on the web
A Book Apart, Practical SVG