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.
Using SVGs as illustrations is another great option. Saving them as SVGs instead of a raster-image format allows you to manipulate the design in your favorite text editor. You can add or remove elements, group paths, or just add classes to hook into for animating. But if you look at the code, it can get pretty overwhelming at first.
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="192px" viewBox="0 0 200 192" style="enable-background:new 0 0 200 192;" xml:space="preserve"> <path d="M32,152c0-2.2-0.8-4-2.4-5.6S26.2,144,24,144c-2.2,0-4.1,0.8-5.7,2.4S16,149.8,16,152c0,2.2,0.8,4.1,2.3,5.7 s3.4,2.3,5.7,2.3c2.2,0,4-0.8,5.6-2.3S32,154.2,32,152z M52,88v80c0,2.2-0.8,4-2.4,5.6S46.2,176,44,176H8c-2.2,0-4-0.8-5.6-2.4 S0,170.2,0,168V88c0-2.2,0.8-4,2.4-5.6S5.8,80,8,80h36c2.2,0,4,0.8,5.6,2.4S52,85.8,52,88z M200,88c0,7.2-2.3,13.4-6.9,18.6 c1.2,3.7,1.9,6.8,1.9,9.5c0.2,6.3-1.5,12-5.4,17.1c1.4,4.7,1.4,9.5,0,14.6c-1.2,4.8-3.5,8.7-6.8,11.8c0.8,9.3-1.3,16.9-6.1,22.6 c-5.3,6.3-13.5,9.6-24.6,9.8H136c-5.5,0-11.5-0.6-18-1.9s-11.6-2.5-15.2-3.6s-8.6-2.8-15.1-4.9c-10.2-3.6-16.8-5.4-19.8-5.5 c-2.2-0.1-4-0.9-5.6-2.4S60,170.2,60,168V87.9c0-2.1,0.8-3.9,2.2-5.4s3.3-2.4,5.4-2.6c2-0.2,5.2-2.6,9.5-7.4s8.5-9.8,12.6-15.1 c5.7-7.2,9.9-12.2,12.6-15c1.5-1.5,2.8-3.5,3.9-6s1.8-4.5,2.2-6.1s0.9-4.1,1.7-7.6c0.6-3.2,1.1-5.8,1.6-7.6c0.5-1.8,1.3-4,2.4-6.5 s2.6-4.6,4.2-6.2C120,0.8,121.8,0,124,0c3.8,0,7.3,0.4,10.3,1.3s5.5,2,7.5,3.2s3.6,3,5,5.1s2.4,4,3,5.6c0.6,1.7,1.1,3.8,1.5,6.2 s0.6,4.4,0.6,5.6S152,30,152,32c0,3.2-0.4,6.3-1.2,9.5s-1.6,5.7-2.4,7.5c-0.8,1.8-1.9,4.2-3.4,7c-0.2,0.5-0.7,1.2-1.2,2.2 s-1,1.9-1.4,2.8s-0.7,1.8-1,3H176c6.5,0,12.1,2.4,16.9,7.1S200,81.5,200,88z"/> </svg>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5T256 1408q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19H128q-26 0-45-19t-19-45V832q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29T766 1580q-123-43-158-44-26-1-45-19.5t-19-44.5V831q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5T945 310q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z"/></svg>
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 effects shows 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!