SVG Optimization: How (and Why) to Optimize SVGs

SVGO is a great SVG compression/optimization utility. You have the option of using the command-line version or graphical user interface version. This guide uses the GUI version. Download and install the Mac or Windows version from the SVGO Github repo.

Open SVGO GUI. Locate the SVG you'd like to compress in Finder (OS X) or Explorer (Windows) and drag it into the application window.

As you can see, we've reduced the size of chimp.svg by 24.2%. This is a relatively simple SVG, so the savings were minimal. However, for more complex SVGs or for those which have been created in Illustrator, the savings can be much greater.

If you open an uncompressed SVG in a text editor, you'll see that the SVG contains numerous arbitrary tags, attributes and properties. Adobe Illustrator, for example, embeds a ton of metadata inside of the SVG so that it can use this data later when you go to edit it. In essence, SVGO strips out this meta data, along with anything else that is not needed for the SVG to render properly in web browsers that support it. In some cases, it will also refactor shapes in the SVG to optimize them fully. Before compression:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.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="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<g>
    <path d="M13.625,13.719c0.292,0.234,0.43,0.61,0.355,0.979l-1,5c-0.094,0.474-0.513,0.802-0.979,0.802
        c-0.065,0-0.131-0.006-0.197-0.02c-0.542-0.108-0.893-0.636-0.784-1.179l0.866-4.332L6.9,12.2C5.8,11.5,5.7,9.8,6.8,9
        C8,8.1,9,7.4,9.8,6.8c1.1-0.8,1.9-1.3,2.7-1.3c0.326,0,0.453,0,0.5,0c0.256,0,0.512,0.098,0.707,0.293L17.414,9.5H21
        c0.553,0,1,0.448,1,1s-0.447,1-1,1h-4c-0.266,0-0.52-0.105-0.707-0.293l-0.635-0.635L13.8,9l-3.2,2.1l2.806,2.443L13.625,13.719z
         M15.5,5.5C16.881,5.5,18,4.381,18,3s-1.119-2.5-2.5-2.5S13,1.619,13,3S14.119,5.5,15.5,5.5z M24,19c0,2.5-2,4.5-4.5,4.5
        S15,21.5,15,19s2-4.5,4.5-4.5S24,16.5,24,19z M22.5,19c0-1.7-1.3-3-3-3s-3,1.3-3,3s1.3,3,3,3S22.5,20.7,22.5,19z M9,19
        c0,2.5-2,4.5-4.5,4.5S0,21.5,0,19s2-4.5,4.5-4.5S9,16.5,9,19z M7.5,19c0-1.7-1.3-3-3-3s-3,1.3-3,3s1.3,3,3,3S7.5,20.7,7.5,19z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.625 13.719c.292.234.43.61.355.979l-1 5c-.094.474-.513.802-.979.802l-.197-.02c-.542-.108-.893-.636-.784-1.179l.866-4.332-4.986-2.769c-1.1-.7-1.2-2.4-.1-3.2 1.2-.9 2.2-1.6 3-2.2 1.1-.8 1.9-1.3 2.7-1.3h.5c.256 0 .512.098.707.293l3.707 3.707h3.586c.553 0 1 .448 1 1s-.447 1-1 1h-4c-.266 0-.52-.105-.707-.293l-.635-.635-1.858-1.572-3.2 2.1 2.806 2.443.219.176zm1.875-8.219c1.381 0 2.5-1.119 2.5-2.5s-1.119-2.5-2.5-2.5-2.5 1.119-2.5 2.5 1.119 2.5 2.5 2.5zm8.5 13.5c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5zm-1.5 0c0-1.7-1.3-3-3-3s-3 1.3-3 3 1.3 3 3 3 3-1.3 3-3zm-13.5 0c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5 2-4.5 4.5-4.5 4.5 2 4.5 4.5zm-1.5 0c0-1.7-1.3-3-3-3s-3 1.3-3 3 1.3 3 3 3 3-1.3 3-3z"/></svg>

As usual, there's a small caveat when using compressed SVGs in Internet Explorer. Let's say you want to embed the SVG as a CSS background image:

.something {
    background-image: url('/some-path/chimp.svg');
    background-size: 3em;
}

<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 24 24">