We’ll add the icons dynamically to our page using Snap.svg and if SVG is not supported we’ll simply show a background image for the span elements that we use to wrap each graphic: We’ll define what will happen for each icon in our script.

For example, for the zoom icon we’ll want to scale up the plus path. We used a size of 64×64 pixel for the icons.įor each icon we want a special animation to happen. The first thing we do is to create some SVG icons using an SVG editor like Inkscape. Older and non-supporting browsers will not be capable of all features. Please note that we are working with a modern JavaScript library for manipulating our SVGs.

We want to try to do something similar using SVG icons with the help of Snap.svg. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. SVG has been one of the most underused technologies when it comes to web development. From our sponsor: Connect Design and Development to Deliver Better Customer Experiences with Applitools Centra.

Svg animation download free