SVGO – an SVG bromance…

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 can be found here: https://github.com/svg/svgo

Share my post!
Facebooktwittergoogle_plusredditpinterestlinkedinmail