Preparing and Exporting SVG Icons in Sketch

Avatar of Chris Coyier
Chris Coyier on

There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici.

Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value is “nonzero”, and this is what Android requires. Unfortunately, Sketch uses “evenodd”. Luckily Sketch provides all the features we need to convert our shapes from “evenodd” to “nonzero”. And its now even easier in Sketch 42.

The direction you draw the points in nested shapes affects the fill.

Direct Link →