Animated SVG Icons with Snap.svg

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
AnimatedSVGIcons

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

SVG has been one of the most underused technologies when it comes to web development. 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. 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.

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. We want to try to do something similar using SVG icons with the help of Snap.svg.

Please note that we are working with a modern JavaScript library for manipulating our SVGs. Older and non-supporting browsers will not be capable of all features.

The first thing we do is to create some SVG icons using an SVG editor like Inkscape. We used a size of 64×64 pixel for the icons.
Inkscape

For each icon we want a special animation to happen. For example, for the zoom icon we’ll want to scale up the plus path. We’ll define what will happen for each icon in our script.
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:

<section class="si-icons">
	<span class="si-icon si-icon-play" data-icon-name="play"></span>
	<span class="si-icon si-icon-monitor" data-icon-name="monitor"></span>
	<!-- ... -->
</section>

With the help of Modernizr we can define the fallback in our CSS:

.no-svg .si-icon-play { background-image: url('../png/play.png') }

.no-svg .si-icon-monitor { background-image: url('../png/monitor.png') }

The PNG icons were generated with the fabulous iconizr tool. You could as well use CSS sprites and define a active class but we decided to just do a very simple fallback for this demo.

If you add the class “si-icon-reverse” to the span, the icon will be initially rendered with the reversed “shape”. For instance, if you want to display the stop icon rather than the play icon, you can achieve that in the following way:

	<span class="si-icon si-icon-reverse" data-icon-name="play"></span>

Now let’s take a look at what we are doing in the JavaScript. The idea is to do something with each icon. That can be some kind of transformation, like a rotation or a scale, or a change of a path altogether. With the Snap.svg we can dynamically load our SVGs, which we store in a folder, and manipulate them in a very practical way thanks to the powerful API.

The configuration variable for the icons, “svgIconConfig” has all the animation settings for each icon.
Let’s take a look at its logic:

[icon name - same name given to the data-icon-name] : { 
	url : [url of the svg file],
	animation : [array of animation configs for each element]
}

Each animation config can have the following structure:

{ 
	el : [element selector], 
	animProperties : [animation config for the initial/from and final/to state]
}

Let’s take a look at some possible values for the initial and final state:

from : { 
	val : [animation name value pairs],
	after : [attribute name value pairs to be applied when the animation ends],
	before : [attribute name value pairs to be applied before the animation starts],
	delayFactor : [animation delay factor],
	animAfter : [animation name value pairs to be applied when the animation ends] 
}

A real example would be the following:

myIconName : { 
	url : 'svgs/myIconName.svg',
	animation : [
		{ 
			el : 'path:nth-child(5)', 
			animProperties : { 
				from : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}', animAfter : '{"stroke" : "#000"}' }, 
				to : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.7269617 z"}', animAfter : '{"stroke" : "#444"}' }
				} 
		},
		{ 
			el : 'rect:nth-child(3)', 
			animProperties : { 
				from : { val : '{"transform" : "t0 0"}', after : '{ "opacity" : 0 }' }, 
				to : { val : '{"transform" : "t-10 -10"}', before : '{ "opacity" : 1 }' }
			} 
		}
]
}

You can initialize the icons like this:

new svgIcon( element, configuration [, options] );

And these are the possible options:

{
    speed : 200, // animation speed
    easing : mina.linear, // animation esing
    evtoggle : 'click', // event: click || mouseover
    size : { w : 64, h : 64 }, // size
    onLoad : function() { return false; }, // callback on svg load
    onToggle : function() { return false; } // callback on toggle (click or mouseover/mouseout)
}

Check out the demo to see some examples for different sizes, easings and activations (on click and on hover).

We hope you enjoy this experiment and find it useful!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 95

Comments are closed.
  1. First ๐Ÿ˜€ Is good to see the use of SNAP this fast after it came out. lovely as always.

  2. Been wanting to start experimenting with Snap.svg since it got out, but I am one of those devs u mentioned that don’t know where to start with SVG. Thanks for writing this, ML. =) and thanks for linking to my article ^^

  3. Hi, I really enjoyed the animations for some of these, especially the ones with different easings, very cool and app like.

    One question though, I’m new to using svg. Just curious how you got those values you input for the starting and endpoints for the animation?

    Thanks!

    • Hi Chris,
      thanks a lot for your feedback! This is how I did it: the starting configuration is basically the same as what’s in the SVG file. For the transforms I simply played with the values and chose something that fits (e.g. rotate or translate the element(s) ). For the path morphing, I drew the end result in the SVG editor and copied the resulting path to the end state. Hope it makes sense. Cheers, ML

  4. Whoa, i love SVG so much, and you can manipulate it into cool animations
    So cool!

  5. Hi Mary, wonderful experiment as always, but I didn’t understand how the mouseover works. When does Snap trigger the “animation”?

    • Hi Davide, I’m not sure what exactly you mean.. The mouseover/mouseout works in the same way like the click. In both cases the event is bound to the span. You can specify which one you want in the options of our script like this:

      new svgIcon( elem, { evtoggle : 'mouseover' } );

      Let me know if this answers your question. Cheers, ML.

  6. Thx It’s Very Nice ๐Ÿ™‚ !

    Bad value X-UA-Compatible for attribute http-equiv on element <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  7. Really cool! Was surprised to see it working great with android stock browser (on Jelly Bean). I’ll surely give it a try for my next html5 mobile app.
    Great tutorials, as always!

  8. Wow! just wow!
    It’s one of the most visually impressive things you’ve ever done. Great job!

  9. Cool animation and effective use of SVG.
    [btw: SVG has the Oscar for THE most underused technology]

    Just one question: why not use the animation feature already present in SVG?

    Sebastian