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:

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.