What are SVGs?

SVGs are vector graphics, which are perfect to display crisp logos and icons on all kinds of devices and resolutions. A SVG consists of XML-tags, those tags describe circles, rectangles, complex shapes or even text, they can have a solid color or a gradient. It is even possible to import images and use filters or masks on them.

How to animate them?

JavaScript is most of the time used to animate them, you can animate the edges of a shape, move it around or merge it into a different shape and much more.

I am animating SVGs on the single blog pages (the background gradient of the text on the left), the "about me" page has a path animation on top of the map and the icons on that page are SVG animations too.

One of my favourite ways to animate SVGs is to just add a class to it with JavaScript and then trigger a CSS animation (stroke animation, opacity fading or a transformation). The follwoing example animates the stroke of a polygon line.

SVG stroke animation

// getting the length of the path to offset it
var path = document.querySelector('#path');
var length = path.getTotalLength();

// getting the length of the polygon line to offset it
function getPolylineLength(polylineElement){
    function dis(p,q){
        return Math.sqrt((p.x-q.x)*(p.x-q.x) + (p.y-q.y)*(p.y-q.y));
    }
    var ps = polylineElement.points, 
        n = ps.numberOfItems, 
        len=0;
    for (var i=1; i<n; i++) {
        len += dis(ps.getItem(i-1),ps.getItem(i));
    }
    return Math.ceil(len);
}

The SVG

// in this case I already set the stroke-dashoffset and the stroke-dasharray
// but you can use the JavaScript code above to calculate it
<svg height="200" width="240" version="1.1" 
    xmlns="http://www.w3.org/2000/svg">
    <polyline stroke-dashoffset="440" stroke-dasharray="440" 
    stroke-miterlimit="10" points="10,30 30,100 100,150 180,120 10,30" 
    stroke-linecap="round" fill="transparent" 
    stroke-width="4" stroke="#111" id="polyline"/>
</svg>    

The CSS

#polyline {
    animation: path 4s ease-in infinite;
}    
@keyframes path {
  to {
    stroke-dashoffset: 0;
  }
}    

SMIL animations

SVGs have its own animation syntax, you can use it to animate the SVGs' elements, with writing XML-tags, it is said that SMIL is dead, but it isn't yet, it's not supported in IE, but it works perfectly fine in Firefox, Chrome and Safari. Chrome is apparently dropping it in the future.