In our daily tasks as web developers, SVG format really is an irreplaceable instrument, and sometimes an actual life saver. We use it for vector logos, illustrations, charts… all the cool stuff. Why, you ask?

 

SVG – Scalable Vector Graphics – is an image file format for two-dimensional graphics, much like .jpg or .png, but more awesome: SVG images support interactivity and animation. 

SVG images and their behaviours are defined in XML, a markup language similar to HTML, that can be read both by machines and humans. This means that SVG files can be searched, indexed, scripted, and compressed. They can also be created and edited with any text editor, as well as with drawing software.The scalable attribute allows us to re-size the images at wish on the websites where we place them, without losing the quality of the pictures. All major modern web browsers support SVG format. Wait, there is more!

SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL – Synchronised multimedia Integration Language – animation specification. The possibilities of this feature are endless. We can use it to create a dynamic picture, dynamic websites, to animate colour attributes, or even to make attributes follow a specific motion path.

If you have some time ahead of you and are interested in training yourself to become an SVG animation wizard, you can have a look at a very detailed guide to SVG animations with SMIL by clicking here. 

A royal example

Today, and because we at 4BIS are loyal subjects, we will be showing off an SVG animation we built, all the while honouring the great and classy Queen Beatrix, former Queen of the Netherlands. For this example, we chose a back and forth returning movement of the hands and blinking of the eyes.

First, we found a nice photo to work with. With any image editing software – we used Adobe Suite – you can fragment the image into different layers to separate the attributes you want to animate, in this case, the hands and eyes. Then, all that is left for you to do is to just save your new image as an SVG file, and start coding! 

The total animation code is:

<defs>

       <animateTransform
               xlink:href="#left"
               attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 0 0"
               to="0 0 0"
               dur="2s"
               repeatCount="indefinite"

               values="0 0 0; 10 0 0; 0 0 0"
               keyTimes="0; 0.5; 1"

               id="forward_left"
       />
       <animateTransform
               xlink:href="#right"
               attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 0 0"
               to="0 0 0"
               dur="2s"
               repeatCount="indefinite"

               values="0 0 0; -10 0 0; 0 0 0"
               keyTimes="0; 0.5; 1"

               id="forward_right"
       />
       <animate xlink:href="#eyeclose" attributeType="CSS" attributeName="fill"
                from="1" to="1"
                values="3d2a23; 3d2a23; 827673; 3d2a23"
                keyTimes="0; 0.25; 0.75; 1"

                dur="2s" repeatCount="indefinite" />
       <animate xlink:href="#eyeclose2" attributeType="CSS" attributeName="fill"
                from="1" to="1"
                values="3d2a23; 3d2a23; 827673; 3d2a23"
                keyTimes="0; 0.25; 0.75; 1"

                dur="2s" repeatCount="indefinite" />
   </defs>

Once you have inserted your new code, open your SVG file in your browser and BAM, it’s ready. Below, the finished product!

Bye bye and have a great ANIMATED day,

The 4BIS team.