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!

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.

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.

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.

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