SVG animation (Scalable Vector Graphics)
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
- 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)
- 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
- 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
https://github.com/maryna-yanul/duck-the-princess/ — repository of the project.
So basically in order to avoid overloading the project with “heavy” libraries all you literally need is CSS and good mood ;)