Sketch: How To Fix Vectorize Stroke Bug With Adobe Illustrator

01 Feb 2016
sketch-tutorial-vectorize-stroke-bug-0

Sketch’s vectorize stroke tool is essential when exporting icons or logos into SVG format for production assets in the final stage of your workflow. It works perfectly when vectorizing simple shapes like circles and rectangles, but fails with the more complex shapes. In this case, when preparing my icons for The Noun Project, vectorizing the stroke for the wavy flag with an “inside” position creates a less than perfect path for the subtracted shape on the inside. Even though the graphical output of the shape looks normal, the actual shape of the path is jagged and includes erroneous points that are unnecessary. Unfortunately, I found this bug the hard way when physically printing the icons on shirts that, to my dismay, included the triangles and geometric shapes as negative space. Fortunately, I found a work around in my workflow which uses our old, trusty but intricate pal, Adobe Illustrator to easily rectify the bug and roundtrip the shape back into new, simpler friend, Sketch. If you want your designs to be absolutely perfect, love using Sketch for the most part despite some bugs here and there, and oh yeah, happen to have Adobe Illustrator still laying around, then please follow along.

sketch-tutorial-vectorize-stroke-bug-1

With this icon, there is a 2 pixel border in the inside position of the shape.

sketch-tutorial-vectorize-stroke-bug-2
sketch-tutorial-vectorize-stroke-bug-3

Vectorize the stroke (Layer > Paths > Vectorize Stroke) which turns into a filled shape and see the unwanted geometric paths. I have not found a way to easily remove the points in Sketch, so I end up going back to our dear old friend, Adobe Illustrator. With the shape selected, press copy (CMD + C) in Sketch and then paste (CMD + V) in an artboard in Illustrator.

sketch-tutorial-vectorize-stroke-bug-4

In Illustrator, the shape becomes a “Clip Group”.

sketch-tutorial-vectorize-stroke-bug-5

Drag the shape outside of the “Clip Group” into it’s own sub-layer and delete the remaining “Clip Group”.

sketch-tutorial-vectorize-stroke-bug-6

The shape will be be empty with no fill or stroke. Do not be alarmed and press the designer panic button just yet because we’re almost there!

sketch-tutorial-vectorize-stroke-bug-7

Fill in the shape with a color, in this case #000000 since it is a Noun Project icon that requires full black. Important: Use the Direct Selection Tool (Keyboard Shortcut: A) to select the entire shape. Without doing so will result in an error message in the next step.

sketch-tutorial-vectorize-stroke-bug-8

In the “Pathfinders” menu (Window > Pathfinder) press the “Merge” button.

sketch-tutorial-vectorize-stroke-bug-9

Voila! The shape has magically become whole without any geometric paths and unnecessary points. We are now ready to get this baby back into the loving hands of Sketch. Optional: Drag the “Compound Path” outside of the group and delete the remaining path(s) in the group. Copy (CMD + C) the “Compound Path” and delete the remaining path(s). You can actually copy the compound path without doing this but I like to keep my Illustrator clean as can be with my OCD designer tendencies.

sketch-tutorial-vectorize-stroke-bug-10

Go back into Sketch and paste (CMD + V) the shape in the same artboard. Nudge the shape back into it’s original place.

sketch-tutorial-vectorize-stroke-bug-11

Drag the shape named “Fill” outside of the group folder and delete folder with “Clip”.

sketch-tutorial-vectorize-stroke-bug-12

Celebrate now as the shape is as perfect as it should be! Let us rejoice in the combined power of our new friend, Sketch and old pal, Illustrator.

sketch-tutorial-vectorize-stroke-bug-13