Using SVG Animations (SMIL)

SVG animations (SMIL) can be incredibly useful to use instead of JavaScript libraries bulking out your website. Using animation elements in your SVG code you can move, spin and manipulate certain elements within the SVG. Similar to CSS animations and transitions these practically make keyframes to move and change colours of elements etc.

Some of the animation elements you can use are:

• <animate> – which allows you to animate attributes and properties over a period of time. You can also use this to target properties that can take colour values.
• <set> – A convenient shorthand for animate, which is useful for assigning animation values to attributes and properties, like the visibility property.
• <animateMotion> – which moves an element along a motion path.
• <animateTransform> – allows you to animate one of SVG’s transformation attributes over time.
• <mpath> – Reference a motion path that is to be used as a path for the motion. The mpath element is included inside the animateMotion element.
• keypoints (attribute) – used as an attribute in animateMotion to provide control of the speed of motion path animations.
• rotate (attribute) – used as an attribute for animateMotion to control whether an object is rotated.

Why bother you ask. SVG animations can do some things you can't do with SVGs in CSS by setting attributes within the SVG especially if the SVG is embeded or used as a background-image in CSS.

Firefox has a limited use for SVG animations and IE and Opera do not keep up with these standards so providing a fallback for them is useful. 

Some examples of SVG animations that work across most browsers can be found here Mozilla SMIL Examples.

Although limited at the moment hopefully the SVG animation movement keeps rolling so we can do away with the bulky CSS and JavaScript libraries for a smoother and quicker way to animate. 

This may seem like a simple block moving around its container but using your imagination it could be a race car doing laps around a circuit, a person running or a spark travelling down a wire, to name a few things off the top of my head. I'm sure you can think of other uses for this especially as more people move online for their everyday needs I feel we need to start almost "Gamifying" our websites to draw people in so they want to visit your site.

At the moment there is plenty of websites out there that are all following the same template of having a huge image banner and using a few icons. The internet is now and the future, we need to make it look bad ass and futuristic.