How to clean and prepare SVGs for the web

In the course of building digital tools and handing off files between designers and developers, we’ve learned some simple but impactful ways to keep SVG files and the corresponding code as clean and lean as possible. Effective and efficient design to dev handoff is important, and as a user experience company, we pride ourselves in effective cross-collaboration—this handoff is no exception. Here’s some information about why this extra step is important, along with some step-by-step instructions (in the video below!) for cleaning up and preparing SVG files for use on your website.

Prepare Your SVG by Cleaning Symbols

Taking a few minutes in your design workflow to clean up a symbol before handoff to a developer has a ton of benefits:

• Less back-and-forth between designers and developers for icon rendering issues
• Better cross-browser compatibility
• Cleaner, more streamlined code output
• Greater flexibility to dynamically customize the SVG in code (animation, color changes, resizing, etc.)
• Better site performance and better overall user experience

Your SVG Code; What You See is What You Get

Each layer (yes, even hidden layers), shape, and group in your vector drawing program is included in the exported SVG code. So, in order to create the cleanest resulting SVG code, we have to clean up the source—the SVG file in our drawing program—before export.

If this cleanup doesn’t happen, developers could inadvertently create a lot of code bloat. This might not sound like a big deal, but think about it for a second: if we’re creating a library of 100 SVG icons for use on an application, and several of those icons are repeated throughout a given web page, we’re essentially pasting that same code several times throughout the HTML page.

Note: The larger an HTML document is, the longer it will take to load. Cleaning out the cruft in your SVGs before handoff can dramatically improve a site’s performance!

Cleaning and Preparing SVG Files is More of an Art Than a Science

Every SVG is different, and some are much more complex than others, but the goal is largely the same: try to maintain the integrity of the visual as best you can, with as few objects remaining as possible. The more you practice, the better you’ll get at finding patterns—paths that can be combined, squashed, or even removed altogether.

In the video below, I take an exported image from Abstract, open it in Sketch, and remove as much as I can to get the fewest remaining objects possible with the same visual effect—ungrouping objects, combining objects into single paths, and even removing the background circle. We can do that with CSS instead, saving a bit more space and cutting the file size.

When it comes to production-ready SVGs and code, every little bit counts.

Now, an Example of How to clean up an SVG!

Before

It took 40 lines of code to make the original icon above, exported directly from Sketch.

See the Pen
Think Blog – SVG Optimization 1 by GeekyChristine (@geekychristine)
on CodePen.

After

We cut the number of lines to more than half! But if you look closely at the code, there are still some nested group tags (<g>) for the same paths, created by the Artboard and Group layers in Sketch… a bit unnecessary. We can cut it down further with an SVG Optimization tool like SVGOMG to get rid of unnecessary metadata, or SVGO if you prefer the command line.

See the Pen
Think Blog – SVG Optimization 2 by GeekyChristine (@geekychristine)
on CodePen.

Voilà! A smaller file with no loss in visual integrity — a fully-optimized SVG that’s ready to be added into an icon sprite, or used directly. Even better — now we can bring back the circle and box shadow with CSS.

See the Pen
Think Blog – SVG Optimization 3 by GeekyChristine (@geekychristine)
on CodePen.

Final Check for your Clean SVG File

You should now have a clean, ready-to-use SVG file. Over time, taking these extra steps will save your team time and effort, make you code more clean, and provide a better overall user experience.