Exploring ways to export clean .svg icons with Sketch…the correct way

Sean Kesterson
Design + Sketch
Published in
7 min readJul 10, 2015

--

If you design interfaces, you probably work with developers on a daily basis. Your job is to problem solve. You find ways to solve issues both visually and logically. For me, and hopefully others, I like to sit down with the UI team and understand their logic and workflow so I can find ways to make their lives easier. In this scenario, let’s talk about passing on clean .svg files in order to style them up in css instead of individually styling each icon. This challenge is due to major bug issues in Sketch. They export sloppy and messy code embedded into the .svg files. This was mostly solved by trial & error but in the end we found the correct solution to export a clean file for the team using Sketch.

Sketch makes my life easier in many ways, but exporting .svg files is a disaster. A bug that needs some fixin’

Let me walk you through this particular example that was both confusing and eye opening.

Recently, I had to make an icon set for our new product at Lucidworks. The workflow was pretty straight forward, but once I started to export these bad boys everything went downhill. Once you open the .svg file into Sublime Text you see all of the clutter that was generated from Sketch. Most is pretty useless and starts to mess with the way the .svg acts if you want to manipulate them in code. In our case, we wanted that full control.

To speed up the workflow on my end, I needed to export cleaner code for the team so they can continue on the project, rather than go into each .svg file and delete all of the clutter themselves.

When you export in Sketch, it generates a lot of messy code. In this example, I designed a simple right arrow icon. This was the outcome:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?>
<svg width=”24px” height=”25px” viewBox=”0 0 24 25" version=”1.1" xmlns=”>http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns">
<! — Generator: Sketch 3.3 (11970) — http://www.bohemiancoding.com/sketch
<title>add</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id=”Icons” stroke=”none” stroke-width=”1" fill=”none” fill-rule=”evenodd” sketch:type=”MSPage”>
<g id=”add” sketch:type=”MSArtboardGroup” transform=”translate(0.000000, 0.210938)”>
<rect id=”Rectangle-14" sketch:type=”MSShapeGroup” x=”0" y=”0" width=”24" height=”24" rx=”2"></rect>
<path d=”M13,13 L13,19 L11,19 L11,13 L5,13 L5,11 L11,11 L11,5 L13,5 L13,11 L19,11 L19,13 L13,13 Z” id=”Fill-5" fill=”#000000" sketch:type=”MSShapeGroup”></path>
</g>
</g>
</svg

Most of this code is worthless and we don’t need. In fact all we really want is the <viewbox> and <path d>. The rest of the junk can get tossed b/c we can control all of this in css globally to the whole set, rather than individual icons. The real headache was the <rect id>, <transform> & <translate>. No matter what I did, Sketch would export these attributes. This was a real problem b/c once you open the .svg in html, the icon was all messed up. Especially if you want to manipulate the icon like we need to.

Sketch generating a whole cluster fuck of messy code.

In order to problem solve I needed to take a step back and go through each step to find the solution

So, how does someone export icons in Sketch, one might ask? This is pretty straight forward and I found three ways to do this. But, there is only one correct way to export clean .svg code. Let’s investigate some possible solutions:

  1. ) Create an artboard for each icon you want to export
  2. ) Use the slice tool and slice er’ up to your dimensions
  3. ) Select multiple icons on one large artboard, click and export in .svg format

*note: You could go to Layers > Path > Flatten and try this route, but Sketch never highlighted the option after I selected the icon. Boo.

1.) Create an artboard

Create an artboard with exact icon size to export. Easy right?

This was my first route and the most straight forward. For this example, I made this artboard 24 x 24 px. I click export and this happens:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?>
<svg width=”25px” height=”25px” viewBox=”0 0 25 25" version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
<defs></defs>
<g stroke=”none” stroke-width=”1" fill=”none” fill-rule=”evenodd”>
<g transform=”translate(0.500000, 0.800000)”>
<g>
<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>
<rect x=”0" y=”0" width=”24" height=”24" rx=”2"></rect>
</g>
</g>
</g>
</svg>

Out of the blue, viewBox, transform, & translate wants to hang with us. Problem is, I don’t want it tagging along.

This brings up bug #1.

First off, the position is 400.5 & -416.2.

Problem: Sketch exported a transform.

I noticed the position of my artboard was 400.5 x & -416.2 y. This seemed to be the problem. All artboards should be pixel-perfect. Since my position was not pixel-perfect, Sketch exported this:

<g transform=”translate(0.500000, 0.800000)”>

No idea where the .800000 came from, either way, we didn’t want this.

Solution: Make the position set to even numbers. This removes any transform in the code. On another note, since the position was off by half-pixels, Sketch changed the size of my viewbox to 0 0 25 25. My original artboard was 24 x 24px. This bug even added specs to the code. No bueno.

Bug #2

Delete the bounding box for clean ass code

Problem: By design, each icon was set to width: 24px , height: 24px, and border-radius: 3px. The problem is, when exporting, the rectangle was added into the path, thus making it difficult to scale at any size by css.

<rect x=”0" y=”0" width=”24" height=”24" rx=”2"></rect>

Solution: Delete any transparent bounding box and let css do the magic. All the developers really needed was the viewbox set to 24 x 24px. They could add in the width, height, and border-radius.

Bug #3:

Problem: Sketch exports a rotate(-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

To easily replicate the arrow icon , I rotated each icon 90 degrees so I could get all four points. Each time you rotate anything in Sketch, it adds a rotate attribute.

This is a huge bug in my mind.

If you remove the rotation in Sketch, it just automatically rotates the icon back to its original view. This takes me back to square one and no solution.

Solution: Open up your .svg icon into Adobe Illustrator, rotate the icon, then drag & drop back into Sketch. This removes the rotation all together.

*note: I could have easily exported that icon from Illustrator, but Adobe also generates a bunch of crappy code when you export as well. Plus, I have already dug myself a hole in Sketch to find this solution.

2.) Use the Slice tool

Slice any part of your design and Sketch will export the icon

Problem: translate & transforms are back! This time, it makes more since b/c the position of each icon is relative the artboard. Lets take a look at what Sketch exported:

<?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">
<defs></defs>
<g stroke=”none” stroke-width=”1" fill=”none” fill-rule=”evenodd”>
<g transform=”translate(-96.000000, -220.000000)”>
<g transform=”translate(-321.000000, 188.000000)”></g>
<rect stroke=”#000000" stroke-width=”0.5" fill=”#FFFFFF” x=”72" y=”196" width=”72" height=”104" rx=”2"></rect>
<g transform=”translate(96.000000, 220.000000)”>
<g transform=”translate(13.000000, 12.000000) rotate(-180.000000) translate(-13.000000, -12.000000) translate(9.000000, 6.000000)” fill=”#000000">
<path d=”M7.4,1.4 L6,0 L0,6 L6,12 L7.4,10.6 L2.8,6 L7.4,1.4 Z”></path>
</g>
<rect x=”0" y=”0" width=”24" height=”24" rx=”2"></rect>
</g>
</g>
</g>
</svg>

Solution: Nothing. Just don’t do it. It takes too long to slice anyways and is a waste of time.

3.) Select any icon and export as .svg

Simply select all of your icons and export to .svg

Problem: Similar translate & transforms issues. This is just not good on any manner if you want to have complete control of these icons in css.

Solution: Again, save yourself some time and don’t do it.

Overall Solution

  1. ) Create an artboard for each icon.
  2. ) Make sure each artboard’s position has no half-pixels and is an even number.
  3. ) Remove all icon rotations.
  4. ) Remove any bounding boxes so Sketch doesn’t export unneeded code.

Clean .svg looks like this :

<?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">
<defs></defs>
<g id=”Icons” stroke=”none” stroke-width=”1" fill=”none” fill-rule=”evenodd”>
<g id=”chevron_right” fill=”#000000">
<path d=”M8,7.4 L9.51351351,6 L16,12 L9.51351351,18 L8,16.6 L12.972973,12 L8,7.4 Z” id=”Shape”></path>
</g>
</g>
</svg>

Now, sit back, relax and drink some beer to wash the sorrows away. Mainly for me, because of all the frustration. On the bright side, maybe Sketch will fix this in the future b/c I love their product.

About me: My name is Sean Kesterson. Adventurist and freelance designer @LEVEL working with their client @Apple. Follow me on twitter at @alimofun or @ www.seankesterson.com . Hopefully this was helpful for y’all and more writing to come.

--

--