Taming SVG graphics as a developer

For the last several years, I have implemented SVG graphics in lieu of the traditional icon font or graphic sprites. There are many reasons why this is a good idea, which you can read about in great detail here. This post is not about why you should use SVGs, but how you can use SVGs in an imperfect world. Yes thats right, sometimes as a developer you receive files that look good but are actually quite ugly underneath. I'll explain...

If you have ever tried to use an SVG exported out of a program like Sketch, only to see a big blank space where your graphic should be, you are not alone. Sketch in particular allows the designer to do awful things to the original SVG, transforms, masks, outlines that go outside of the original viewbox. Here are some tricks I use to tame rogue SVGs back into shape.

Ungroup!

The first thing I do after opening an SVG in Illustrator is try to remove superfluous groups (<g> tags in the code). Cmd+Shift+G should do this on OSX. Sometimes as you ungroup you start to see the SVG changing because someone use a mask or some other method to get it into its current state. This is where you can either request the designer changes this, or dig in yourself if you are not afraid of Illustrator. I often will expand the original shape, choosing to treat it as a filled shape rather than a collection of strokes and fills. This might not always work, as sometimes you want the strokes and fills to achieve a particular effect, as you can target the different paths individually via CSS to change their various properties. Most of the time however, we are making single color icons, and expanding the shape is fine.

You can see how the expand also removed the transform, which is something we will talk about next.

Before:

After:

The next thing I would do is delete <defs> and <style>, as well as remove any class names or IDs on the paths/shapes unless I planned to use them for something.

Transforms

This is a common problem. I can't honestly say why it happens in the first place, but this is the result. The path actually has a transform moving it from the original viewbox, which usually means you see nothing outputted. My method for removing transforms is to either expand its shape in Illustrator or upload the problem file into this random web application I found, Method Draw, and use its ungrouping action to remove the transform then save the image and reload into a program such as Illustrator or just even a text editor. I have no idea why Method Draw fixes this issue over just ungrouping things in Illustrator, but it does. (If you know, please drop a comment below!). I use Method Draw every time I work with SVGs, it also allows you to reorient the path on shapes, which sometimes are actually outside their own viewbox then transformed in. Some of this goes above my SVG pay grade, but that is how I turn them into usable files.

Masks

Don't use masks, use a tool like Illustrators pathfinder to modify your shape to the desired outcome. If you receive a file with a mask, try to ungroup it, delete the mask and then modify the shape to match it.

Combine Paths

Say you have a graphic of a plus sign, it is actually two rectangles. Unless you plan to control each rectangle individually, you should combine these into a single shape. Sometimes when you do this, weird things happen like the stroke gets bigger, this should be avoidable by using expand.

Copy out of Illustrator into a text file

You can copy a shape in Illustrator and paste into your text editor, to see what the output looks like. This is generally my workflow, as I might go back and forth to ungroup things etc, until I like the final SVG markup.

Remove inline colors

SVGs will often have inline styles applied to the to change their fill and stroke colors. I suggest you remove those so you can control things properly with CSS.

Convert Text to paths

Outline your text, don't try to load it as SVG text, unless you are trying to do something like changing the actual text in the SVG via JavaScript etc.

I would love to hear about your tricks for working with SVGs in the comments below. As always, if you are looking for an experienced Front End Engineer, give a holler, I'm generally available for hire within a month or so.