Animating SVG Icons with CSS
April 12, 2014 — Code
I’ve been a fan of icon fonts for a couple of years now. All of the icons you see on my site come from a custom icon font that I made using IcoMoon. I also frequently use Font Awesome, especially for quick prototyping in the browser. You just pop in a link to their CDN hosted CSS and start using the icon classes. Easy peasy lemon squeezy. But recently I’ve been hearing little whispers about switching to SVG. Here I am all comfy cozy with my icon fonts and now there’s something new to learn. (Not really that new, just a late bloomer.) I kinda shrugged it off until I saw Chris Coyier blog about it. Chris has long been a lover of icon fonts as well, so if he’s changing his mind, I should probably pay attention. There are lots of pros and cons with either option and I don’t feel like it’s an either/or decision. I really love the pros of SVG, but I was still waiting to be wowed. Then somewhere, somehow I stumbled upon the new SVG icon pack called Iconic. Not only was it an extremely thorough pack of commonly used icons, they boasted “smart” and “responsive” features.
So a common problem with a lot of icon design is that they usually look great at one end of the size spectrum, and just okay at the other end. Take the following example:
Both briefcases look okay in the middle 32px range. Font Awesome’s icon looks pretty good at 16px, but looks pretty ridiculous as 64px. The line icon set was designed for a more of a “feature” usage and looks fabulous in the larger size, and pretty much useless in the smaller size. So if you’re looking for a good briefcase icon to use in a wide range of sizes, font, SVG, or otherwise, you’re probably going to want to use two different icon sets. You may even have to serve two different files if this is a case of getting bigger as the browser width gets bigger, such as in responsive websites and apps.
But what if an icon set was able to serve one file and give you a design that is optimized for the size you need? This is where Iconic comes in. They offer three different size optimized versions of the same basic icon concept in one tiny SVG. Take a look:
The differences between the three sizes are subtle, so subtle you may have to look hard to spot them. But now that you’ve seen them, consider what would happen to the space in the larger icon if you shrunk it down as small as the 16px version is. Now, this is a quick jpg rendering of the icons, and they are much sexier in their intended SVG version on the web, but look at the one pixel space in the Font Awesome 16px icon and see how big it gets in the 64px version. Then compare that to how tight the space remains in the each of the Iconic icons. Pretty sweet, right? On top of that, not only does Iconic give you three different sizes in the same icon, but it comes with a tiny little script that will help pick the best one of the size you need. To get the full effect, their tour does a pretty good job of showing these features off.
One of the biggest bonuses of using SVG’s is that you have access to all of the paths in the icon with CSS. Want to use different colors for different parts of an icon? No problem. Want to add a shadow to one path and semi-opacity to another? No problem. One to animate just one part of the icon, while the rest stays still? …wait for it… No problem!
I’m not an expert in CSS animations or SVG’s in general (yet), so it took me a lot of finagling to get these concepts I’m about to present to you to work. But I am pretty happy with them and they work for what I wanted to do.
The use case for this first example was to highlight a bar on a chart when you mouse over the corresponding item. Then I threw in a bonus that turns the entire chart past 11.
I won’t attempt to give you a line by line explanation of what’s going on here, so I urge you to just dig in and play with the code yourself. Here’s the gist of it:
I’ve repeated my bars three times in SVG. The first set is at full height. The second is regular height, but has a “shadow” class applied, the last is regular heights for my values and full color. Then with CSS, I apply a transform to the full heights bars and the colored bars to make them zero hieght, and a semi-opacity to the shadow bars. With some data attributes and the help of jQuery, I’m able to target each set of bars and apply a new transform on hover. Give those elements a CSS transition, and you’ve got yourself an animation.
The idea here was very similar. I wanted to move the hands of the clock to correspond with a set amount of hours, and then show my ’round the clock love for WordPress.
Again, I target my clock hand paths and use jQuery to assign classes that animate with transforms and transitions.
These are really basic ideas and there’s a whole world of possibilities here, but it was a lot of fun to figure out, a lot of fun to actually use, and made possible by the fabulous people behind Iconic. I hope you enjoy these little samples and will go forth and make more awesome!