A Beginner’s Guide to SVGs - Imarc, a digital agency

3 minutes remaining

While scalability is one benefit of using SVGs, they’re lightweight in file size, too, so they don’t slow down a website’s load time. You can also use the generated xml code so they can be manipulated by CSS and Javascript; my favorite benefit to using an SVG.

I just started working with SVGs in front-end development on a project for our client NS1, the leading provider of Managed DNS, Dedicated DNS and real-time telemetry; I wanted to put together a beginner’s guide to help get others started. Trust me, some of these I learned the hard way!

Setting Up an SVG File

Settings

There is a wide array of settings when you’re saving a file in SVG format, so it can be a bit overwhelming. While most of the defaults are fine to use, I’ve found these settings to be optimal for working with the SVG code:

SVG Profile: SVG 1.1 is fine, soon there will be SVG 2.0 but SVG 1.1 is widely used.
Type: Adobe CEF, this gives you more refined typography, with no issues in modern browsers.
Images: Embed, this keeps everything contained in the SVG so you don’t need to worry about keeping linked files in sync.
CSS Properties: Style Attributes, this puts all of the css inline, whereas the Style Elements option adds classes with style properties which could cause conflicts with multiple SVGs on a page.
Preserve editing capabilities: Checked, until ready for final export to keep file size down.

Art Boards

Another thing to keep in mind when setting up your SVGs is to keep the art board cropped tight to your graphic. You’ll also want to keep it to just one graphic per SVG file, otherwise, it will think the SVG is the total size with all of the graphics (even when exporting just one art board). No matter what size your original SVG is, you can update the height and width properties in the SVG code, or use CSS to make it responsive so it resizes on different screen sizes.

Organization

One thing that I cannot stress enough is to organize your files in your graphics editor! My editor of choice is Adobe Illustrator, and I name all of my layers accordingly. This saves you the hassle of having to add IDs to all of your code once it’s exported. Your layer names become your element IDs, which is helpful down the road for styling and animating (I’ll get into that a little bit later). Grouping in Illustrator also creates groups (or tags), so you can easily see the organization of the file in the code and target a group of elements in the SVG. Since the code already has your corresponding IDs, you then just need to think about adding some custom classes to other pieces of the code that you may want to manipulate.

Working with SVGs

Styling

One of the biggest benefits of using SVGs is the ability to style them with CSS. Say you want an icon on one page to be white, but you want it to be black on another page? Easily done with SVGs! Instead of saving out multiple versions of the same icon as a .png or .jpg format, you can use the same SVG code and manipulate it with CSS to change the color. The only thing to be wary of here is that not all SVGs are created equal. If you’re using multiple SVG icons, while one might use paths that you can change the stroke color, another might use a different shape, where you’d have to update the fill color, like the example to the right.

SVGs can be set up differently, therefore need to be styled differently.

Animating

There is so much you can do when it comes to animating SVGs. From movement, to opacity, to drawing strokes, etc. My method of choice is using velocity.js to animate with CSS. It’s lightweight, and there are a lot of built-in easing options to get you started. Here’s a complete list of supported CSS animations with velocity: http://julian.com/research/velocity/#svg.

To touch upon the organization of your SVG files again, this is where IDs come in handy, and any custom classes you add to the code. Using IDs, classes and groups to organize your code makes it easier to animate different pieces of an SVG at a time. One of my favorite tricks I learned recently is using the stroke-dasharray property to “draw” lines onto the screen. Using delays and durations, I was able to stagger the animation so the whole SVG appeared on screen in a sequence.

Example using velocity.js to animate SVGs

Updating

Always keep a version of your SVG in the native editor format. This will save you time and hassle when you need to make updates down the road. When you make updates to the original SVG, it will overwrite the custom classes you’ve added in the code, so I suggest writing them down or printing out your SVG and mapping your classes to each piece.

Try it Yourself!

All in all, SVGs can be a little tricky, but the payoff is huge. The ability to control, style and animate different pieces of a graphic with code is optimal for front-end engineers. While there is definitely a learning curve, once you understand how they work and how best to organize, the possibilities are endless. Here are some other resources and more extensive tutorials for you to check out to help get you started: