SVG: Why We Prefer to Use It

We prefer to use SVG as often as possible and in this article we uncover some tips and tricks of using it. We explain on simple examples how some basic SVG animations can be created.

Front-end

SVG (Scalable Vector Graphics) — it is markup language of scalable vector graphics which was created for describing of two-dimensional vector and mixed (vector-raster) graphics in XML format. It supports fixed graphics as well as animated interactive graphics.

Why we use SVG?

  • It helps us to scale our graphic up to any size without losing its quality.
  • Small size of files (it is very useful for mobile devices).
  • Text format of files which allows to read and edit them in any text processor.
  • Considerable list of visual characteristics which allows to change color, outline’s width, transparence.
  • Separate elements have own interactive characteristics which allow to hook event handler on any part of SVG file.
  • Possibility to animate parts of SVG file.
  • Open standard.
  • Resolution independent format (it perfectly suits small screens of mobile devices as well as Retina displays).

Here are most popular ways of animating SVG-files

  • SVG animation with SMIL

This technology is recommended to use if we need to keep an animation in SVG-file directly. For example, if we want to link up animation via HTML <img src=file.svg… or CSS background: url(file.svg), but still have an access to all attributes of performance. SMIL is supported with almost all web-browsers except Google Chrome (from version 45) which deprecated 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 to get an access to some attributes of performance which are available while working with SMIL.

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

Using JS libraries for SVG animations we can get all possibilities of SMIL and CS in one. This way is the most effective and popular. And if the animation is simple you can apply ready-to-use library solutions without reinventing the wheel.

Library Snap.svg

Snap.svg it is JS library which helps developers to handle SVG graphics. You have possibility to upload, animate, create SVG graphics directly in your browser. Library’s depository is here https://github.com/adobe-webplatform/Snap.svg

Web-site: http://snapsvg.io/

 

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

<svg version=»1.1″ baseProfile=»tiny» id=»details» xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink» x=»0px» y=»0px» viewBox=»0 0 104 104″ xml:space=»preserve»>

<g>

<path id=»mess-one» fill-rule=»evenodd» fill=»none» stroke=»#201600″ stroke-miterlimit=»22.9256″ d=»M54.4,30.9H33.6c-0.9,0-1.6,0.7-1.6,1.6v21.8c0,0.9,0.7,1.6,1.6,1.6h2.7v6.8c0,0,4.7-4.8,6.7-6.8h11.3c0.9,0,1.6-0.7,1.6-1.6V32.5C56,31.6,55.2,30.9,54.4,30.9z»/>

<path id=»mess-two» fill-rule=»evenodd» fill=»#F1F2F3″ stroke=»#201600″ stroke-miterlimit=»22.9256″ d=»M49.6,41.4h20.7c0.9,0,1.6,0.7,1.6,1.6v21.8c0,0.9-0.7,1.6-1.6,1.6h-2.7v6.8c0,0-4.7-4.8-6.7-6.8H49.6c-0.9,0-1.6-0.7-1.6-1.6V43C48,42.1,48.8,41.4,49.6,41.4z»/>

</g>

</svg>

Definition of SVG object:

var s = Snap(‘#details’);

Definition of the element inside SVG:

var one = s.select(«#mess-one»);

var two = s.select(«#mess-two);

Next step is to set attributes to selected element (color of filling, color of outline, width of outline):

one.attr({

fill: «#bada55»,

stroke: «#000»,

strokeWidth: 5

});

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

one.transform(«t 0,10»);

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

#mess-ne{opacity:0;}

bb_lenta.animate({‘opacity’:’1′}, 50, mina.easein); // 50 is time of appearance in milliseconds, easein — effect of appearance (you can find more effects on official site).

If you need uniform motion of element from initial position to preset position with following hiding of element, here is code for it:

one.animate({‘transform’:’t28 0′}, 400, mina.easein, function() {

one.animate({‘opacity’:’0′}, 100, mina.easeout);

});

Here is the function for interval start of different animations:

setTimeout(function() {

one.animate({‘opacity’:’0′}, 100, mina.easeout);

}, 1000); // one second delay and then hide element

This is how we can change the coordinates of element:

var one_coo = [45.6,48.6,61,41.8,58.3,40.7,43,47.5]; // array with necessary coordinates (which replace the old ones)

one.animate({points: one_coo}, 300, mina.linear); // procedure for changing of element’s initial coordinates to the new ones.

Initial coordinate of element (inside SVG) must be without spaces and separated with commas. If text processor converts code with spaces, they must be replaced with commas.

Here we create group of two elements:

var s_group = s.group(one, two);

It is strongly recommended to create own function for each animation and place all code snap.svg and .js in it. If you need to launch your animation with scroll you can use Waypoints plugin (http://imakewebthings.com/waypoints/).

Here is the function of animation which launches once when user scrolls down to the element with id=block-details:

$(‘#block-details’).waypoint(function() {

detailsAnim(); // it launches the function of animation

this.destroy(); // it cancels further execution of waypoint if user returns to it

},

{

offset: ‘70%’ // margin from upper part of display for calling the function. If current place of the block is included into these 70% this waypoint will be activated.

});

With the expansion of mobile devices and more complex design solution for web-sites SVG has become very popular language. It is used for creating icons which will look perfect on any device (from old smartphone to brand new Retina display). Also SVG helps front-end developers and designers create bright catching animations which are compatible with responsive layout.

 

Image credits: preview photo courtesy MadeWithCode

Anna Kalmius
Front-end
11.07.2016

Most Read

Get in Touch

Done!
We'll message you during one hour :)
Our business hours start at 10 AM (GMT+3), as soon as we get back to work, we'll message you.

Let's get to know you

Fill out the form and we'll contact you soon as possible, or e-mail us at sayhello@asight.pro if you have any questions.



You may attach files or drag&drop it here.