SVG Export

General things about SVGs

SVG is a vector format useful for creating and deploying simple images in browsers. Icons, simple illustrations, diagrams and similar. SVG is not to be used for photographs and similar high-colour, high-pattern images.

SVGs on the inside are nothing special – they are pure code definition of vector data. SVGs, unlike other image formats, can be opened with any text editor and inspected what's happening inside. Whereas, if you try to open a GIF or JPG, there is just chaos & madness inside.

Here is a sample SVG opened in Gapplin, this is how it looks:

And this is the clean code behind it:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<title>sample svg</title>
<circle cx="7.5" cy="7.5" r="7.5" style="fill: #231f20"/>
<rect x="15" width="15" height="15" style="fill: #231f20"/>
<rect x="3.76" y="18.76" width="7.48" height="7.48" style="fill: none;stroke: #ed2024;stroke-miterlimit: 10"/>
<circle cx="22.5" cy="22.5" r="4.05" style="fill: none;stroke: #231f20;stroke-miterlimit: 10"/>
</svg>

Strokes

To cut the long story short, the icons we create should contain no strokes. All of the lines/strokes should be converted into outlines (fills), and exported as such. Select an object, and convert it to outlines. This will make all of the strokes and lines pop into fills. Do check what actually happened with the visual output then, as sometimes things glitch and you have to fix them a bit.

Pixel precision

Pixel precision is not specific for SVGs, it's required for all icons and precise artwork. Simply enable pixel grid in your tool of choice, and make sure all of the horizontal and vertical lines fall precisely on the full pixel, something like this:

This will make sure your icon renders perfectly in a browser.

Misaligned artwork, although it might look good in vector format:

... once rendered in full pixels looks blurry:

Pixel precision is a true religion for any icon designer!

Do not use masks / clipping paths when exporting

The vectors you are making should be as simple and as clean as possible. As mentioned above, you should even try to turn your strokes into fills for total control of SVG. Therefore, any masking you are doing should be flattened and masks should be applied before you export to SVG.

In case you are creating something complex, it's possible you do really need masks in order to create the artwork. However, when you are exporting that artwork as SVG, simply flatten it, apply all the masks, and then export SVG. You might copy/paste entire art board and flatten it there (so you preserve to original source artwork), or any method you like, as long as the end result is the simplest SVG possible, without any fancy stuff inside it.

SVGO Compressor plugin

By default Sketch exports a little bit bloated SVGs, and adds lots of stuff in the header especially.

Here is Sketch's default bloat of a simple circle:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="187px" height="187px" viewBox="0 0 187 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> <title>o</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="o" stroke="#979797" fill="#D8D8D8"> <circle id="Oval" cx="94" cy="94" r="48"></circle> </g> </g> </svg>

You can see it starts with , there are a bunch of things promoting Bohemian and Sketch in it, etc.

That's why there is SVGO compressor plugin which minimises SVG output. Get it, install it, and like magic, look at your SVG now compared to the above one:

<svg xmlns="http://www.w3.org/2000/svg" width="187" height="187" viewBox="0 0 187 187"> <circle cx="94" cy="94" r="48" fill="#D8D8D8" fill-rule="evenodd" stroke="#979797"/> </svg>

It's SVG, it's circle, and that's it. No additional bloat. That's what we are aiming for.