What do SVG stroke outlines have to do with reversing paths? Well, let’s review what they mean first, then how they’re connected and in what circumstances we can use this connection to our advantage.
Stroke outlines is what typical web apps need when it comes to iconography. SVG icons are the latest and arguably best option (so far), with font icons on a close second place. In bundled JS apps (in your typical React, Angular, Vue, etc.) it’s common practice to define one path per icon, and pass them as props to a simple UI component for rendering. This way we avoid a lot of repetitive code that would otherwise bloat the final bundle. It also helps browsers render the icons faster and more reliably.
Now, that UI component usually controls a fill color, but it can’t set a stroke-width because some shapes would become unattainable. So then strokes are created by exploiting the way fill works: by adding together paths that are drawn in the same direction (clockwise or anti-clockwise) and subtracting paths drawn in different directions. Much like the union vs. intersection operations on selections in traditional graphics software (read Photoshop).
And this is where reverse paths come into play. In order to convert a solid filled shape into a stroked shape we can just clone the initial path, scale it down (or up, as needed), reverse its direction, and append it to our icon path.
But hey, why jump through all these hoops when we can just create and export stroke outlines easily from the designer’s graphics software? Well, I have yet to see any such software to create a single path, or to draw the sub-paths in opposite directions. They use other SVG features to achieve the same subtraction result, which are more simple for them and still produce valid SVG files. We can actually use this to skip the cloning and scaling of the initial path, and possibly to achieve better results when things like stroke-linejoin matters.
So the exported SVG file usually contains two separate path tags, one for the exterior of the shape and one for the interior cut-out. But if we simply paste both of them in this tool, all we get is the predicted filled shape. The inner path is there but it doesn’t cut the hole in the middle of the exterior path.
Luckily, there’s a very handy tool that takes in a path and draws it backwards, effectively reversing it. And the result is something like this, or better depending on how you draw the inner path.
See the Pen SVG single path outline stroke by Teodor Sandu (@teosan) on CodePen.
Enjoy!
