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: monday.com, a new way to manage your work! Meet the new visual project management tool.

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!

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

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

Which newsletter would you like to receive?

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. 3

    Hi Mary,
    Thank you for amazing tutorial as always πŸ™‚

    I’m trying to add this animated icons to the buttons. But I still can’t make SVG buttons animated when I make mouse over the button (not icon). Could you please tell me is it possible?

    The only way I found is to add styles for buttons directly to the with icon. But in this case the caption goes before icon and I can’t make an icon floating to the left side of button.

    Thank you very much in advance! πŸ™‚

    • 6

      Hi Zoltan. Icons themselves look nice but you script must be pretty bugged as when you hoverin/out really for few seconds on any of the icons they stop to respond. I hope my comment will help you to improve

  2. 7

    Is there a problem with the source files in chrome. ive downloaded the source files, which open / appear / animate fine in both safari and firefox, but do not appear/ animate in chrome? please help.
    Version 30.0.1599.101
    Scott

    • 8

      This is the errors that shows in the chrome console for every icon: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.

    • 10

      Might you have to download all resource in local instead of loading from other site. I think your trouble in Cross-domain issue.

  3. 11

    Guys I’m getting so exited about Snap. Nice tuts Mary Lou and Zoltan! for me, as a not seasoned JS-guy, the Snap-API docs are really hard to understand. That what made not trying to use Raphael. These examples are great. I’m going to play with them!

  4. 12

    Thanks for this amazing tutorial! I have a quick question on triggering the animation. It looks like using “evtoggle”, I’m limited only to “hover” and “mouseover”. Is there a way to trigger the animation using anything else? For example, if I hover on a separate element?

    • 13

      Hi Mike, you could do something like this:

      
      var theIcon = new svgIcon( iconSelector, svgIconConfig, { 
      	onLoad : function() {
      		document.getElementById( someSeparateElement ).addEventListener( someEvent, function() {
      			theIcon.toggle( true );
      		} );
      	}
      } );
      
      

      Let me know if that works for you.
      Cheers, ML

    • 14

      Is it possible for anyone to include a working example of the animation of one element being triggered by hovering or clicking on another element? That seems like something that would be handy to be able to do and I can’t seem to get it to work.

    • 15

      Hey Mike,

      Where you ever able to figure this out? I’m trying to implement a similar solution.

    • 16

      Following Mary Lou’s suggestion, I had success with the following (using jQuery, but I’m sure it wouldn’t be too hard to re-write in native JS), where the icon is inside .diagram-header. Clicking this ancestor element triggers the animation.


      $(el).closest('.diagram-header').click(function() {
      svgicon.toggle (true);
      });

  5. 17

    Hi Mary,
    Awesome tutorial. This tutorial inspired me to to start learning about svgs and snap. I am trying to do create an icon but I get an
    ‘Cannot call method ‘appendChild’ of null ‘ error
    I can’t tell if the problem is with my svgConfig object or my constructor. Can you please help. Here is the
    jsbin link

    • 18

      Hi Raju, try wrapping the inner contents of the svg element in a <g>. My fault, I forgot to mention it :S Let me know if it works. Cheers, ML.

    • 20

      Mary Lou, could you give us that exact code bit that shows how to “”wrap the inner contents”. I’m new to this. That would really really help me. Thanks a lot in advance!

  6. 21

    Great stuff! Did you know it ‘breaks’ when you franticly keep hovering the icons? πŸ˜‰

  7. 22

    I am so sorry to find out that this does not work at all on Chrome (31.0.1650.63, the latest version for MacOSX)..There is nothing appear on my screen except green background and text. However, on Safari, everything is OK.

    • 24

      Hi, I threw all files into the server then everything work well, I think Chrome has some problem with local files(format like: file:///…….)
      Thanks πŸ™‚

  8. 26

    Hi Mary,

    I’m loving your site, only came across it the other day but have been truly inspired!

    I am playing around with these icons and I was wondering, is there a way of remotely triggering the animations, say from an anchor?

    Thanks πŸ™‚

  9. 27

    hi
    thank you for the great article

    do you know how can i add demos to the wordpress theme?

  10. 28

    Mary Lou, You guys are killing it with all these great tutorials! This is another great one.

  11. 29

    Hi Mary Lou, thanks for a great article and demo! In order to minimize http-requests, would there be a way to modify this so you can read all icons from the same SVG?

  12. 30

    Excellent work!
    I found your article while googling for “animated svg”, as I am trying to make an animated logo for my web page.
    Thak you!

  13. 31

    Very good work! I’m using this on my website and I’m trying to combine it with your very cool overlay navigation effect! Do you think it’s possible to do this?

  14. 32

    Nice work!
    Is it possible to scale the icons by percent of the viewport so they will get bigger/smaller when you change the viewport size? I thinking of something like this:


    <body>
    <div style="width:10%">
    <!-- svg icon here, scaled to 100% of the surrounding div and thus,
    to 10% of the viewport width -->
    </div>
    </body>

  15. 33

    hey, i make the download, but when i open the project, i can’t see no items, i don’t know what happen! help me!

Comments are closed.