svgtofont
svgtofont copied to clipboard
Attribute fill-rule seems to be ignored
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
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 Some attributes converted to font svg are lost.
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
.
- https://github.com/jaywcjlove/svgtofont/issues/195#issuecomment-1609418046