Icons are a common way you see SVGs used on the web today, and they can be implemented in multiple ways. You can use the standard image tag, set up an icon font, or set up an SVG sprite-sheet system. Each way has its own advantages, but at Code School, we’re working on setting up an SVG sprite-sheet system. If you’re starting out with SVG icons, check out Font Awesome, IcoMoon, and Nucleo – they’re great resources to get you going.
Now that your SVGs are set up with all your classes and optimized, the real fun stuff can start. If done right, animations can enhance your project and not just be an afterthought. Animations can be something cool to look at while also having a purpose, like directing a user’s eye to something important, communicating an action, and helping a user’s experience feel more natural when exploring our website. There was a recent post on animating icons using mo.js by Mary Lou on icon animations. This is a great example of communicating an action — Mary combines an icon font and animation to emphasize a click action. It makes it very clear what the active state is with this technique. I could click those icons all day!
Codrops is full of great animation examples – this collection of page loading effectsshows you how animations can soften transitions between content. Loading states help users understand that content is actually loading and the page isn’t broken. Some of these transitions are a little distracting for my taste. I could see a few of them working great if you tie in similar animations somewhere else in your website or application. If nothing else, they might spark an idea for your next project.
Of course, there are lots of benefits with SVGs, but those are just a few of the ones that can enhance your projects. Want to level up your skills on the foundations of SVG? Our new SVG tutorial, You, Me & SVG, will teach you about what makes up an SVG and how to create one from scratch. Already an SVG pro? Share your favorite resource for icons, illustrations, or SVG animations in the comments below!