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:
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
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. 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 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 in order to avoid overloading the project with “heavy” libraries, all you literally need is CSS and good mood.
Do you have an idea?
Let's schedule an intro call and discuss your business idea!