How to properly prepare SVG assets for development
After creating pixel-perfect icons in Sketch, here’s how to best prepare clean SVGs that will be used in code.
Before Beginning
At DesignMap, designers work directly with developers daily, so we’re always refining our process to ensure the highest quality in software we deliver. It’s important to hand off clean SVG files so your assets, from icons to graphic illustrations, always render properly in a browser or native application. In this article, we’ll walk through the necessary steps for designers to clean up SVGs in Sketch, and deliver them using Zeplin.
Pro Tip: Once your design iteration is complete, I recommend saving a copy of the file for delivery, since some of these steps make it difficult to refine your vector work later on. Note that this process not meant for animated SVGs (which may require the manipulation of separate layers) or line icons, (where you may want to change the weight of a stroke via code)
1. Start by selecting the layers of your asset.
For this article, we will use an arrow that we created using multiple shapes.
2. Convert vectors to outlines
Select all the vector layers of the asset, and Convert to Outlines. This action ensures that strokes and rounded corners will scale proportionately if the SVG changes in size.
3. Combine the shapes
Now that our layers are outlined, we want them to be one combined shape. Use the “Union” tool to combine shapes into one complete path.
3. Rename the layer to something that a developer can recognize
Pro Tip: Use dashes or underscores when naming assets for development, like “icon-arrow” or “icon_arrow”. The shortcut to rename a layer is [command + r]. If you are renaming multiple layers, the Rename It sketch plugin is a great tool for keeping your layer naming in check.
4. Flatten the shape
This removes excess meta data in the SVG code, and ensures that rounded corners of your vector paths will scale proportionately.
5. Make it exportable
Make your asset exportable, and select “SVG” as an export option.
6. When all assets are prepared, export artboards to Zeplin
Make sure you have the mac app downloaded, and are logged in: https://zpl.io/download-mac
In Zeplin, you can see assets are clean and ready for use.
For more asset preparation, we also found Zeplin’s exporting article really helpful. Special thanks to Wanda Lam, a fellow designer at DesignMap, where we like to share what we know and refine our craft.
