SVG Optimization: How (and Why) to Optimize SVGs
SVGs are great; making them smaller makes them even greater. This guide will show you how to optimize SVGs.
SVGs are great; making them smaller makes them even greater. This guide will show you how 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>
After compression:
<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;
}
Despite the background-size inclusion, IE9-11 will render the SVG as a tiny speck. This is because for some SVGS, SVGO strips out the width and height attributes -- and Internet Explorer 9, 10, and 11 need these attributes to be present (even with arbitrary values) for them to render.
To fix this, after you've compressed your SVG, open it in a text editor and add the "width" and "height" attributes to the SVG tag:
<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 24 24">
Vibram Five Finger shoes are awesome pieces of running gear. But you can also use them for hiking and looking weird around town.