Back to Blogs
Image For Blog

Using SVG Animations (SMIL)


10 Nov 2021

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:

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. 

SVG SMIL Animate with Path

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.

This website was built in SVG animation and CSS3 Animation.

This is an ongoing project to better understand SVG animation across browsers so this website may change often.

For the best experience use Chrome on desktop.