How to export clean .svg icons with Sketch

What is SVG?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Vector Drawable?

Vector drawables help you create a drawable based on XML vector graphic. In simple terms all SVGs have to be converted to vector drawables and packed in an .apk file.

Why should we use SVGs?

  • Resolution-independent vector graphics. No need to make icons for 6 different DPIs.
  • Easier way to make animations and interactions.
  • Saves a lot of space. 80–95% space saved by using svg instead of a png (for a 24x24 dp system icon)
  • Easier to manage. Making a repo is all the more easier.
  • Need file in just one color. You can add colors on the go while development.
  • Provision to work for all android devices. Android lately launched backward compatibility for SVG icons.
  • Having all drawables in vector format is a big big boon for cross-collaboration.

Current problems with Sketch SVG export

While I was making icons for the central repo I figured out a huge bug. The SVGs exported don’t have any problem whatsoever. Open them on Chrome or preview them on mac, they look similar to what you expect them to be. The problem arises when you convert them to vector drawables.

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M0 0h24v24H0z" fill="none"/><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>
Icon downloaded from Google’s icon repository opened in Sketch
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="22px" height="22px" viewBox="0 0 22 22" 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>ic_build_black_24px</title><desc>Created with Sketch.</desc><defs></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="city" transform="translate(-171.000000, -375.000000)"><g id="ic_build_black_24px" transform="translate(170.000000, 374.000000)"><g id="Group"><polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon><path d="M22.7,19 L13.6,9.9 C14.5,7.6 14,4.9 12.1,3 C10.1,1 7.1,0.6 4.7,1.7 L9,6 L6,9 L1.6,4.7 C0.4,7.1 0.9,10.1 2.9,12.1 C4.8,14 7.5,14.5 9.8,13.6 L18.9,22.7 C19.3,23.1 19.9,23.1 20.3,22.7 L22.6,20.4 C23.1,20 23.1,19.3 22.7,19 L22.7,19 Z" id="Shape" fill="#000000"></path></g>
</g>
</g>
</g>
</svg>

Figured the bug?

If you see closely, the height and width in the first svg is 24. Even the viewbox is “0 0 24 24”. The second svg just changed the height and width to 22. Viewbox is “0 0 22 22”. How did that happen?

How to create correct SVGs?

Its is really not that tough if you follow these steps with caution. It can be bit tedious, but the end results are worth it.

1. Create an Artboard

Make the artboard of the same size of the icon/illustration you want to export.

2. Create your icon

Sketch is a very powerful tool in making icons. Clean, swift and easy. But there are a few rules to follow if you want it be cleanly exported.

WARNING@ line 14 We don't scale the stroke width!
WARNING@ line 15 We don't scale the stroke width!
WARNING@ line 16 We don't scale the stroke width!
This shape follows all the rules. Fill, inner border, no mask, no groups and no transformation.
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg width="24px" height="24px" viewBox="0 0 24 24" 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>24x24 dp</title>
<desc>Created with Sketch.</desc>
<defs><path d="M13.6,9.9 C14.5,7.6 14,4.9 12.1,3 C10.1,1 7.1,0.6 4.7,1.7 L9,6 L6,9 L1.6,4.7 C0.4,7.1 0.9,10.1 2.9,12.1 C4.8,14 7.5,14.5 9.8,13.6 L18.9,22.7 C19.3,23.1 19.9,23.1 20.3,22.7 L22.6,20.4 C23.1,20 23.1,19.3 22.7,19 L13.6,9.9 Z" id="path-1"></path><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="22.0329167" height="21.9001586" fill="white">

<use xlink:href="#path-1"></use>

</mask>

</defs>

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

<g id="24x24-dp" stroke="#2985C3" stroke-width="2" fill="#3B99D9">

<use id="Shape" mask="url(#mask-2)" xlink:href="#path-1"></use>

</g>

</g>
</svg>

--

--

@uwmhcid. Previously design @bookingcom, @Practo, @BelongCo, @Zomato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saransh Solanki

Saransh Solanki

@uwmhcid. Previously design @bookingcom, @Practo, @BelongCo, @Zomato