Exporting SVGs in Sketch for Android

If you’ve ever had to export SVGs for Android, you might have run into a problem with shape fills not appearing as you’d want them to when placed.

Magnifying glass or frying pan?

This is because Android supports Non-Zero fills and not Even-Odd fills in SVG assets. Making the change in Sketch is easy (see the right panel below) but might result in the icon on the right rather than the one you want on the left:

To fix this, you’ll need to select the interior path of the icon…

If you tab through the vector points, you’ll notice that you move clockwise through the path.

…and select Layer > Paths > Reverse Order.

You might also have to Close Path (top right):

If you tab through the vector points now, you’ll now move counter-clockwise through the path.

And that’s it! 🎉

*chef kissing fingers gesture*

Technical Notes & Resources

• In the SVG code, Sketch still gives the fill-rule as “evenOdd,” though the asset will render correctly.
• Android has a tool, Vector Asset Studio, for converting SVGs to Android vector drawables.
• Learn more about the difference between Non-Zero and Even-Odd fills here.

I tweet @serifluous. Thanks to Justin Fiedler, one half of our amazing Android team at Hightail, for editing help.