HTML code

SVGO – an SVG bromance...

Estimated reading time: 2 minutes

I am always looking at ways to streamline my workflow, and I recently discovered a great little npm utility called SVGO .

This neat little package can be run from the command line, and greatly reduce the contents (and therefore size) of SVG files.

Take for instance my logo. In a previous post I talked about stripping out the unnecessary content manually using Sublime Text. That whole time I could have been using this tool to reduce my development time!

It's really easy to install. You simply need to type this single command into the terminal:

$ [sudo] npm install -g svgo

Then to simply clean up a single svg, you run this command (obviously being in the same folder your file is, or add the path at the start of the file name):

$ svgo aliwright-logo.svg

Or save it with a new file name in the same folder:

$ svgo aliwright-logo.svg aliwright-logo.min.svg

This is what it looked like when I created the SVG in Adobe Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="387px" height="333px" viewBox="0 0 387 333" enable-background="new 0 0 387 333" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M191.823,90l50.911,50.912l50.911,50.912l-50.911,50.912l-50.911-50.912l-50.912,50.912L90,191.823
l50.911-50.912L191.823,90 M191.824,5.147l-42.427,42.426L98.485,98.485l-50.912,50.912L5.147,191.823l42.426,42.426l50.912,50.912
l42.426,42.428l42.427-42.428l8.485-8.484l8.484,8.484l42.427,42.428l42.427-42.428l50.911-50.912l42.426-42.426l-42.426-42.426
l-50.911-50.912L234.25,47.574L191.824,5.147L191.824,5.147z"/>
</g>
</svg>

And this is it afterwards:

<svg xmlns="http://www.w3.org/2000/svg" width="387" height="333" viewBox="0 0 387 333"><path fill="#FFF" d="M191.823 90l50.911 50.912 50.911 50.912-50.911 50.912-50.911-50.912-50.912 50.912L90 191.823l50.911-50.912L191.823 90m.001-84.853l-42.427 42.426-50.912 50.912-50.912 50.912-42.426 42.426 42.426 42.426 50.912 50.912 42.426 42.428 42.427-42.428 8.485-8.484 8.484 8.484 42.427 42.428 42.427-42.428 50.911-50.912 42.426-42.426-42.426-42.426-50.911-50.912-50.911-50.911-42.426-42.427z"/></svg>

Stats:

Done in 1838 ms!
0.916 KiB - 47.1% = 0.484 KiB

You can also optimise multiple SVGs in the same folder in one command, or even set up a Grunt task. Even more options are available.

The banner image is originally a photo by Florian Olivo on Unsplash