svgtofont icon indicating copy to clipboard operation
svgtofont copied to clipboard

Attribute fill-rule seems to be ignored

Open vitto opened this issue 3 years ago • 2 comments

I'm trying to build a font with some svg exported from Figma, as flatten shape, when I export it from Figma it generates this svg as a terminal icon:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6ZM4 6H6V8H4V6ZM14 6H8V8H14V6ZM4 10H10V12H4V10ZM20 6H16V8H20V6Z" fill="black"/>
</svg>

When I use it to build the font, no errors are thrown, but when I try to see the icon it is show like fill-rule="evenodd" is ignored, resulting like this svg:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6ZM4 6H6V8H4V6ZM14 6H8V8H14V6ZM4 10H10V12H4V10ZM20 6H16V8H20V6Z" fill="black"/>
</svg>

Would it be nice if this can be fixed.

It seems to be an existing problem also for other libs: https://github.com/nfroidure/svgicons2svgfont/issues/62

vitto avatar Mar 31 '21 14:03 vitto

I found a workaround from Figma for it in case someone need to fix it with Fill Rule Editor plug-in, but it would be nice if there is an automatic way to fix it.

vitto avatar Mar 31 '21 14:03 vitto

@vitto Some attributes converted to font svg are lost.

jaywcjlove avatar Mar 31 '21 14:03 jaywcjlove

Hi @vitto, please try using SVGFixer to outline the icons before converting them to font. Or use a figma plugin to change the winding rule from even-odd to non-zero.

schmidt-oliver avatar Jul 03 '23 07:07 schmidt-oliver

  • https://github.com/jaywcjlove/svgtofont/issues/195#issuecomment-1609418046

jaywcjlove avatar Jul 03 '23 07:07 jaywcjlove