Benefits of Learning How to Use SVG

in Front-end

We’re excited to announce the launch of our newest SVG course, You, Me & SVG! SVG, or scalable vector graphics, is a pretty popular image format these days — partly because it has great browser support and opens up opportunities to get even more creative with your work. You can use SVGs for anything from icons to illustrations to animations. Animation is my favorite part about SVGs, and this all happens after the design is complete. SVGs are an XML-text file, so you can animate and manipulate your SVG with CSS and JavaScript. And since they’re vector based, they look great at any size — including on retina screens. So to celebrate our new course, today I’ll go through some ways you can use SVGs and how to set them up!

See the Pen Icon Examples by Code School (@codeschool) on CodePen.

Icons

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.

See the Pen Font Awesome Example by Code School (@codeschool) on CodePen.

Illustrations

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>

A little HTML, CSS, or JavaScript knowledge might make it a little easier to understand. SVGs are XML, which looks similar to HTML. Just like HTML, you can add classes to SVG nodes and target them with CSS. In my workflow, after I set up all my classes, I then optimize the file using either SVGO or SVGOMG. Both have their advantages, but SVGOMG gives you access to a lot of configuration options. The benefit to SVGO is you can optimize multiple files through the console much faster than SVGOMG. The optimized SVG will condense your SVG code and clear out a lot of the unnecessary code.

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

Animations

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!

If you’re looking to create a complex interactive SVG element, Snap.svg is a good option. Snap.svg is an SVG JavaScript library that makes creating interactive assets a lot easier. Their homepage has a great example of interactivity with that alligator animation on hover. I could see using that illustration and animation to emphasize danger or warning. You should also check out their demos to get a further understanding of what you can accomplish with their library.

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!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jordan Wade

A Front-end Developer who started as a carpenter on a Amish construction crew. He traded in his tool belt for all things web design and development related.

Might We Suggest

You, Me & SVG Course

Learn how to create and use scalable vector graphics online. Whether your icons, shapes, and assets are on small or large screens, SVGs have you covered!

View Course