SVG

SVG was created for depicting two-dimensional vector and mixed (vector-raster) graphics in XML format. It supports fixed graphics as well as animated interactive graphics. In this article we’ll be shedding some light on some of the basic uses of SVG, giving you the knowledge needed to employ it effectively.

Why Do We Use SVG?

SVG allows us to:

• Scale our graphic up to any size without losing quality;
• Keep files small (it is very useful for mobile devices);
• Format the file text, which allows users to read and edit on any text processor;
• Animate parts of an SVG file.

SVG also possesses:

• A considerable list of visual characteristics which allow a user to change the color, and alter the width or transparency of an outline;
• Separate elements have their own interactive characteristics which allow the hooking of event handlers in any part of an SVG file;
• A resolution independent format (it perfectly suits the small screens of mobile devices, as well as Retina displays);
• Open standard.

The Most Popular Ways to Animate SVG-Files

SVG Animation with SMIL.

This technology is recommended if you need to put an animation into the same SVG-file. For example, it can be used effectively if we want to link up animation via HTML

 <img src="file.svg…" /> 

or CSS

background: url(file.svg)

and still have access to all attributes of performance. SMIL is supported by almost all web-browsers except Google Chrome (from version 45) which stopped using SMIL in favor of CSS animations and Web animations.

SVG Animation with CSS (@keyframes).

Here we use the same animations as for HTML elements. The main disadvantage is that CSS doesn’t allow us to get access to some of the performance attributes which are available while working with SMIL.

SVG Animation with JS libraries (Snap.svg, PathsJs, RaphaelJs).

By using JS libraries for SVG animations, we can explore all the possibilities of SMIL and CSS in one. This way is the most effective and therefore most popular. If the animation is simple you can apply ready-to-use library solutions without reinventing the wheel.

Library Snap.svg

Snap.svg is a JS library which helps developers handle SVG graphics. With it you have the possibility to upload, animate, and create SVG graphics directly in your browser. The library’s repository is here.

Here is an example of the source code of an SVG file:

So, let's try to create a simple SVG animation using the Snap.svg library.

Definition of SVG object:

let s = Snap('#dialog');

Definition of the element inside SVG:

let one = s.select('#mess-one');

let two = s.select('#mess-two');

The next step is to set attributes to the selected element (fill colour, outline colour, the width of the outline). If your SVG file already has the necessary attributes, then you can skip this step. For example:

one.attr({

    fill: '#bada55',

    stroke: '#000',

    strokeWidth: 5

});

Setting the initial positions of elements before the beginning of the animation (it depends on the source):

let oneStartPosition = "t-60,60";
let twoStartPosition = "t50,50";

one.transform(oneStartPosition);
two.transform(twoStartPosition);

Please do not forget that while setting an initial position, some artefacts may appear. Therefore, these elements are better to be initially hidden via CSS and displayed only when the animation starts.

#mess-one, #mess-two {

    opacity: 0;

}

Set the elements appearance animation. The number 350 is the duration of the appearance in milliseconds, easein — effect of appearance (you can find more effects on the official site).

one.animate({'opacity':'1'}, 350, mina.easein);

two.animate({'opacity':'1'}, 350, mina.easein);

If necessary, we can also animate the figure’s coordinates (change the appearance of the figure). This feature permits the creation of very flexible animations. The initial coordinate of the element (inside SVG) must be without spaces, and separated with commas. If the text processor converts code with spaces, they must be replaced with commas. Example code:

let newCoordinates = [45.6,48.6,61,41.8,58.3,40.7,43,47.5];

one.animate({points: newCoordinates}, 300, mina.linear);

Then we will move the elements from the initial position to the given one:

one.animate({'transform':'t -3 3'}, 300, mina.easein, function() {

    one.animate({'transform':'t 0 0'}, 700, mina.elastic);

});

two.animate({'transform':'t 3 3'}, 400, mina.easein, function() {

    two.animate({'transform':'t 0 0'}, 700, mina.elastic);

});

Now let's try to insert all the above code into the functions and see the final result.

With the proliferation of high powered mobile devices and more complex design solutions for web-sites, SVG has become a very popular language. It is used for creating icons which look perfect on any device (from old smartphones to brand new devices with a Retina 5K display). SVG also helps front-end developers and designers to create bright, eye-catching animations which are compatible with a responsive layout.

If you have any other questions, or wish to hire some of our expertise, feel free to get in touch with us on our website!