SVG animations

It’s been a long time since I posted anything here. Many things got in the way, but now they have past and I can get back to writing about what I love.

I have recently fallen in love with SVG (scalable vector graphics). They’re vectors so they look good on all screens and the code for them can be put directly into the HTML, which means we can then play with it via CSS and/or Javascript. For example CSS3 keyframe animations or transition effects can be applied. You can use media queries to make responsive graphics or you can use some JS to bring the graphics to life in a parallax scrolling site. When combined, this opens up a whole host of options for inserting cool and useful effects.

One easy example is an animated loading icon. For now lets make something super simple, a rotating square. Below is the SVG code which you can put directly into the HTML of the page, take note of how classes and IDs can be applied to these elements just like any other HTML.

<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:1.41421;">
    <g id="blue-square">
        <rect x="9.69946" y="9.69946" width="30.6011" height="30.6011"/>
    </g>
</svg>

This code was generated with Affinity Designer, but any vector creation software worth its salt will be able to save as an SVG file. Then you just open the file in your favourite code editor and take the <svg> tag and contents. It is also possible to write SVG code by hand and input all the coordinates for the shapes yourself.

Now that we have the shape in place we need to give it some colour and a little animation. SVG styles are a little different to standard CSS, for example rather than background-color they use the fill property. Here is the CSS I used to create the colour and key frame animation. I have not put on the browser prefixes for the animations in this example to keep it concise. For maximum compatibility though you would need to add the -webkit- and -moz- prefix to keyframes and animation.

svg {
    width: 50px;
    height: 50px;
}
#blue-square {
    fill: rgba(37,106,219,1);
    animation: rotate 5s infinite ease-in-out;
    transform-origin: 25px 25px;
}
@keyframes rotate {
    90% {
        transform: rotate(720deg);
    }
    100% {
        transform: rotate(720deg);
    }
}

Here is the finished icon.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>