Better format for exporting SVGs with outlined strokes

I’ve been having this issue when exporting SVGs from Figma that use a stroke that has been outlined. A simple example of a 14x14 square with a 1px stroke:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H2V14H14V2ZM1 1V15H15V1H1Z" fill="white"/>
</svg>

And when using that SVG in any icon font tool, the square ends up being filled.

CleanShot 2021-09-02 at 12.13.23@2x

I believe this is because of the fill-rule="evenodd". When I compare the SVG to how Illustrator exports it, it’s different:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2V14H2V2H14ZM15 1H1V15H15V1Z" fill="white"/>
</svg>

I know others have experienced this pain and have to jump to Illustrator to outline strokes, which is a shame https://github.com/tancredi/fantasticon/issues/135

4 Likes

Having this very same issue with our icon font generator. It’s appearing differently across different devices. Very hard to track down, but glad I found this thread.

After trying many different things in various product, I eventually found the " Fill Rule Editor" plugin for Figma.

@Miguel_Solorio You might want to give it a try.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.