Sharing is caring

Here is where we like to share our knowledge with you

SVG file format – vector graphics – is simply an XML file (HTML alike) with representation of graphical data and information to support it.

SVG became an unreplaceable instrument and sometimes a technical lifesaver. We use it for vector logo’s, geodata representation, schematics, charts or just for fun.

But you can use it for so much more. SVG supports an animation on its own. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification.

The possibilities of this feature are endless. We can use it to create a dynamic picture, dynamic websites or dynamic graphs. The animation movement can take many shapes from a simple back and forward motion to even a specific route.

Look at www.futuregiethoorn.nl as an example for complex route animation on a website.

 

 

With some adaptations, we can build an animation. This animation can be in many forms. For this example we chose a back and forth returning movement of the hands and blinking of the eyes.

Let us show you a step-by-step example of a back an forth motion played in a loop;

First find a photo to convert.

 

 

 

 

 

Before we can make an animation, we have to convert the .JPG picture to a SVG file.

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>

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!