SVG Animation

Maryna Yanul

2016 November 092:00 am

Fast and Practical Animating of SVG Images.

Why We are Using SVG

If we observe the rapid growth of web development segment over the course of past few years we notice more frequent usage of SVG images. They are used for icons, logos, graphs and even fonts. Why has SVG become so popular these days that even clients suggest using it when providing requirement specification. Superb quality on any devices — main reason to chose this particular format over others.

For us as for developers there are even more reasons to use SVG:

Text format

Scalability

The ability to use raster graphics in SVG

Indexed by search engines

Many ways to animation

Integrates with HTML and XHTML documents

Compatibility with CSS

Unicode support

It supports standardized W3C Document Object Model

But there are also inconveniences:

A large number of small parts makes use of SVG irrational

Can not be used in drawing maps

Disadvantage of XML markup — large file size

Ways of Optimizing SVG Images

Since we end up writing some extra code when rendering vector graphic the end result should be optimized using different services. Most often we use SVGO (https://github.com/svg/svgo). It’s quite easy to use and there is no need to upload the images to other websites.

Process of Animating SVG

There is a number of ways SVG can be animated:

SMIL (is the native SVG animation specification)

Web Animations API (The Web Animations API is native JavaScript that allows you to create more complex sequential animations without loading any external scripts)

​WebGL

CSS animation

Css animation is used in order to avoid overloading your service with big libraries for animating icons and loaders.

Let’s have a look at an example of animating a yolk that was initially drawn in “Sketch”:

As can be seen from the example, we use Keyframe Animation Syntax for animation.

It’s implemented by setting the initial position of an element by id(0%), transition(50%) and final position(100%). To achieve smooth animation Initial and final values are equal.

Here are some benefits of this approach:

You don’t need an external library

Preprocessors (like Sass or Less) allow you to create variables

You can listen for onAnimationEnd and some other animation hooks with native JavaScript

It is easy to use for responsive development because you can modify your animation with media queries

Downsides of using css animation:

You can’t produce some complex physics effects that are nice for realistic motion

A lot of recalculation needs to be done if you adjust timing

CSS and SVG on mobile sometimes requires strange hacks

Still, with the help of simple and trivial css animation interesting projects can be made. As an example have made a simple game-video using HTML, CSS & a little bit of JavaScript, all the SVG were drawn in “Sketch”. The game’s objective is to save the princess(“just click!” in any situation)