SVG Icons and Sketch
If your design process is like ours at Button, you most likely use Bohemian Coding’s Sketch to design and export assets for web. Sketch is a fantastic tool and until recently it was my go-to replacement for Adobe Illustrator.
In the last two weeks our team updated all of the icons in our Dashboard to Material Design and migrated old <img> files to SVG components. This change proposed an interesting challenge regarding Sketch, masks, and SVGs.
It all started when I took on the task of copying the SVG code for each icon and pasting them into a shared icon.html file slotted for development. This is a process that I’ve done before without issue.
You’ll notice in the screenshot above that there was a mask path within the icon. This is because the icon is a series of combined (or compound) shapes. Until recently, this was how our Design team has always made our icons. We soon realized that combined shapes in SVG icons aren’t universally supported. Grace, one of our amazing front-end developers, pointed out that there was an issue in the code that prevented the icon from rendering. Let the troubleshooting commence.
First, I tried removing the combined shapes and recreating the shape without any combined pieces. Three minutes later, I realized that this didn’t work and wasn’t scalable. Next, I tried flattening the icon in Sketch. Let’s just say the flatten feature in Sketch leave much to be desired…
Like any good designer, I began googling like wild. Previous experience taught me that Adobe Illustrator had more robust functionality when it came to combined shapes. Therefore, I assumed there must be a better way using Illustrator.
Thankfully there was.
I found this article on the Graphic Design Stack Exchange forums, which contained part of the answer.
How to best export SVG code for combined or masked shapes:
- Export your icon as an SVG from Sketch.
- Open it in Adobe illustrator and select all parts of your icon.
- Object → Flatten Transparency
- (optional) Object → Expand
- (option) Remove stray vector points manually or Object → Path → Simplify
- Open up the Pathfinder tab in the right menu, then do Pathfinder → Divide
Now its time to export. Click File → Export → Select SVG in Finder. Then, in the modal that pops up click “show code” and copy and paste into your html file.
After which you’ll get this code.
Notice that the <mask> object has disappeared and overall the code is much simpler. Now you’re ready to implement this in your spiffy website!
Looking back, its kind of funny that this is a slightly laborious process for such a small icon. While Bohemian Coding’s team has done an excellent job in creating Sketch, this functionality seems to be lacking in a critical use case for web. At the end of the day, using the right tool is the best way to get the job done right.
Hope this help your web development team to create scalable and responsive SVG icons library!
Special thanks to Grace Kwan for bringing this problem to my attention in the first place. And as always, a special thanks to Patrick N. Lewis, editor, mentor, and fantastic design partner.
