Scalable Vector Graphic, or SVG, is an image format we utilise as much as possible in our projects. An SVG’s small file size, in addition to its ability to be replicated at any size without loss of quality, makes it a fantastic tool for the web.

There are many great things you can do with SVG - and this Insight will talk about how animations can bring your SVG graphics to life, as demonstrated with a simple preloader animation we created for the upcoming Metlink app.

Before diving into the details, let’s set up the basic CSS:

Animation is a CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. At the moment, animation is supported in the latest versions of all major browsers, either natively or under the webkit vendor prefix. Unsupported browsers (IE 10 and below) will ignore the property, so ensure that your page doesn't rely on it!

First we created the Metlink logo in Adobe Illustrator and exported the shapes as SVG. Then we opened the SVG in a code editor and gave each shape a CSS class, so it could be targeted with colour and animation styles. We decided to include the CSS inside the SVG, rather than creating an external stylesheet, to make the animated SVG more portable.

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="180px" height="180px" viewBox="0 0 180 180" enable-background="new 0 0 180 180" xml:space="preserve">
  <style type="text/css">
    .ball { fill: #D5DF3E; }
    .hoop { fill: #003C64; }
    ...
  </style>

  <path class="ball line-one" d="M38.279,21.498c0-5.478,4.44-9.921,9.917-9.921c5.479,0,9.921,4.443,9.921,9.921 c0,5.479-4.443,9.921-9.921,9.921C42.72,31.419,38.279,26.977,38.279,21.498"/>
  <path class="ball line-two" d="M38.279,21.498c0-5.478,4.44-9.921,9.917-9.921c5.479,0,9.921,4.443,9.921,9.921 c0,5.479-4.443,9.921-9.921,9.921C42.72,31.419,38.279,26.977,38.279,21.498"/>
  ...
  <path class="hoop line-seven" d="M112.368,116.728c-14.766,0-26.731-11.966-26.731-26.73c0-14.762,11.966-26.731,26.731-26.731 c14.764,0,26.735,11.969,26.735,26.731C139.104,104.762,127.132,116.728,112.368,116.728 M112.368,55.038 c-19.312,0-34.962,15.653-34.962,34.959c0,19.314,15.651,34.961,34.962,34.961c19.31,0,34.963-15.646,34.963-34.961 C147.331,70.69,131.678,55.038,112.368,55.038"/>
</svg>

Next we defined some CSS keyframe animations. The top ball fades in smoothly, which is controlled by:

<style type="text/css">
  ...
  @-webkit-keyframes one-fade-in {
    0% {
      opacity:0;
      transform-origin: center;
      transform: scale(0.1);
    }
    20% {
      opacity:0.1;
    }
    50% {
      opacity:0.5;
    }
    80% {
      opacity:0.7;
    }
    100% {
      opacity: 1;
      transform-origin: center;
      transform: scale(1.0);
    }
  }
</style>

 And the balls also move smoothly, in a downward and sideways motion to look like they are traversing through the hoop, which is controlled by:

<style type="text/css">
  ...
  @-webkit-keyframes move-zoom {
    from{
      transform-origin: center;
      transform: translate(0px, 0px) scale(1.0);
    }
    to {
      transform-origin: center;
      transform: translate(24px, 25px) scale(1.55);
    }
  }

  @-webkit-keyframes move-zoom-large {
    from {
      transform: translate(0px, 0px);
    }
    to {
      transform: translate(40px, 42px);
    }
  }

  @-webkit-keyframes move-zoom-back {
    from {
      transform-origin: center;
      transform: translate(0px, 0px) scale(1.0);
    }
    to {
      transform-origin: center;
      transform: translate(-40px, 43px) scale(0.95);
    }
  }

  @-webkit-keyframes move-zoom-back2 {
    from {
      transform-origin: center;
      transform: translate(0px, 0px) scale(1.0);
    }
    to {
      transform-origin: center;
      transform: translate(-26px, 24px) scale(0.6);
    }
  }
</style>

 The bottom ball fades out smoothly to disappear, which is controlled by:

<style type="text/css">
  ...
  @-webkit-keyframes one-fade-out {
    0% {
      opacity:1.0; transform-origin: center;
transform: scale(1.0); } 20% { opacity:0.7; } 50% { opacity:0.5; } 80% { opacity:0.1; } 100% { opacity:0; transform-origin: center; transform: scale(0.1); } } </style>

And finally, the hoop ‘jiggles’ (ie: expands and contracts) as the balls pass through it, which is controlled by:

<style type="text/css">
  ...
  @-webkit-keyframes hoop-jiggle {
    0% {
      transform-origin: center;
      transform: scale(1.0);
    }
    20% {
      transform-origin: center;
      transform: scale(1.0);
    }
    50% {
      transform-origin: center;
      transform: scale(1.1);
    }
    80% {
      transform-origin: center;
      transform: scale(1.0);
    }
    100% {
      transform-origin: center;
      transform: scale(1.0);
    } 
  }
</style>

Now we have the keyframe definitions set up, we apply each one to a path element, using CSS classes.

<style type="text/css">
  ...
  .line-one{
    -webkit-animation: one-fade-in 2s infinite ease;
    animation: one-fade-in 2s infinite ease;
  }
  .line-two{
    -webkit-animation: move-zoom 2s infinite ease;
    animation: move-zoom 2s infinite ease;
  }
  .line-three{
    -webkit-animation: move-zoom-large 2s infinite ease;
    animation: move-zoom-large 2s infinite ease;
  }
  .line-four{
    -webkit-animation: move-zoom-back 2s infinite ease;
    animation: move-zoom-back 2s infinite ease;
  }
  .line-five{
    -webkit-animation: move-zoom-back2 2s infinite ease;
    animation: move-zoom-back2 2s infinite ease;
  }
  .line-six{
    -webkit-animation: one-fade-out 2s infinite ease;
    animation: one-fade-out 2s infinite ease;
  }
  .line-seven{
    -webkit-animation: hoop-jiggle 2s infinite ease;
    animation: hoop-jiggle 2s infinite ease;
  }
</style>

That’s all the animation stuff, now the final thing in the .svg code are the vector objects themselves, which are a sequence of coordinates generated by Adobe Illustrator:

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="180px" height="180px" viewBox="0 0 180 180" enable-background="new 0 0 180 180" xml:space="preserve">
  <style type="text/css">
    ...
  </style>

  <path class="ball line-one" d="M38.279,21.498c0-5.478,4.44-9.921,9.917-9.921c5.479,0,9.921,4.443,9.921,9.921 c0,5.479-4.443,9.921-9.921,9.921C42.72,31.419,38.279,26.977,38.279,21.498"/>
  <path class="ball line-two" d="M38.279,21.498c0-5.478,4.44-9.921,9.917-9.921c5.479,0,9.921,4.443,9.921,9.921 c0,5.479-4.443,9.921-9.921,9.921C42.72,31.419,38.279,26.977,38.279,21.498"/>
  <path class="ball line-three" d="M57.138,47.643c0-8.574,6.953-15.524,15.527-15.524c8.578,0,15.527,6.95,15.527,15.524 c0,8.578-6.95,15.53-15.527,15.53C64.091,63.173,57.138,56.22,57.138,47.643"/>
  <path class="ball line-six" d="M46.521,168.422c-5.478,0-9.921-4.445-9.921-9.922c0-5.479,4.443-9.919,9.921-9.919 c5.479,0,9.918,4.439,9.918,9.919C56.439,163.977,51.999,168.422,46.521,168.422"/>
  <path class="ball line-five" d="M72.665,149.559c-8.577,0-15.524-6.952-15.524-15.522c0-8.58,6.947-15.533,15.524-15.533 c8.578,0,15.527,6.953,15.527,15.533C88.192,142.606,81.243,149.559,72.665,149.559"/>
  <path class="ball line-four" d="M128.488,89.997c0,8.91-7.217,16.125-16.12,16.125c-8.904,0-16.122-7.215-16.122-16.125 c0-8.901,7.218-16.12,16.122-16.12C121.271,73.877,128.488,81.096,128.488,89.997"/>
  <path class="hoop line-seven" d="M112.368,116.728c-14.766,0-26.731-11.966-26.731-26.73c0-14.762,11.966-26.731,26.731-26.731 c14.764,0,26.735,11.969,26.735,26.731C139.104,104.762,127.132,116.728,112.368,116.728 M112.368,55.038 c-19.312,0-34.962,15.653-34.962,34.959c0,19.314,15.651,34.961,34.962,34.961c19.31,0,34.963-15.646,34.963-34.961 C147.331,70.69,131.678,55.038,112.368,55.038"/>
</svg>

NB: SVGs aren’t viewable in < IE9, so if your user base are on IE8 (or worse), please ensure that your SVG (or animated SVG) aren't essential to the usability of the site.

For more examples and explanation on animated SVGs, check out this gallery of great applications: http://www.hongkiat.com/blog/svg-animations/