search

jaywcjlove / svgtofont

Read a set of SVG icons and ouput a TTF/EOT/WOFF/WOFF2/SVG font.
https://jaywcjlove.github.io/svgtofont
MIT License
520 stars 82 forks source link

SVG conversion broken for mirrored paths with opposite winding order #165

Closed lyuma closed 1 year ago

lyuma commented 2 years ago

Here is the original icon, likely created by mirroring the left eye to create the right eye. Download "bad.svg": https://user-images.githubusercontent.com/39946030/172930821-ec22550d-76d9-41e7-898c-22f7310df846.svg Godot_icon_bad_winding

Here is the same icon, fixed by hand to have matching vertex order in the right eye as left: Download "fixed.svg": https://user-images.githubusercontent.com/39946030/172931900-d648e8c6-ce69-4373-bda7-cced07a34974.svg Godot_icon_fixed

You can see the result here: The first icon is the "fixed" one. The second with missing eye is the "bad" original icon: godot_icon_fontdrop_winding The same bug is present on Glyphter. It is possible their backend uses some code from svgtofont.

To test, save the "fixed" icon as svg/a.svg and the "bad" icon as svg/b.svg. Then, run this command:

svgtofont --sources ./svg --output ./font --fontName godot-icon

This command successfully creates .ttf. Please ignore the exception: it happens after the .ttf is generated, so there is no problem for me.

Here are the specific paths which I changed by hand between the "bad" and "fixed" SVG documents.

Original "bad":

<svg><g><path fill="#ffffff" d="
M-247.2-10.7c0,50.1-40.6,90.7-90.8,90.7c-50.1,0-90.7-40.6-90.7-90.7c0-50.1,40.6-90.7,90.7-90.7C-287.8-101.5-247.2-60.9-247.2-10.7
M-1.6-10.7c0,50.1,40.6,90.7,90.8,90.7c50.1,0,90.7-40.6,90.7-90.7c0-50.1-40.6-90.7-90.7-90.7C38.9-101.5-1.6-60.9-1.6-10.7"/>
<path fill="#414042" d="
M-269-5.3c0,33.2-26.9,60.2-60.2,60.2c-33.2,0-60.2-26.9-60.2-60.2c0-33.2,26.9-60.2,60.2-60.2C-296-65.6-269-38.6-269-5.3
M 20-5.3c0,33.2,26.9,60.2,60.2,60.2c33.3,0,60.2-26.9,60.2-60.2c0-33.2-26.9-60.2-60.2-60.2C47-65.6,20-38.6,20-5.3"/></g></svg>

"fixed" version:

<svg><g><path fill="#ffffff" d="
M-247.2-10.7c0,50.1-40.6,90.7-90.8,90.7c-50.1,0-90.7-40.6-90.7-90.7c0-50.1,40.6-90.7,90.7-90.7C-287.8-101.5-247.2-60.9-247.2-10.7
M176-10.7c0,50.1-40.6,90.7-90.8,90.7c-50.1,0-90.7-40.6-90.7-90.7c0-50.1,40.6-90.7,90.7-90.7C135-101.5,176-60.9,176-10.7"/>
<path fill="#414042" d="
M-269-5.3c0,33.2-26.9,60.2-60.2,60.2c-33.2,0-60.2-26.9-60.2-60.2c0-33.2,26.9-60.2,60.2-60.2C-296-65.6-269-38.6-269-5.3
M 140-5.3c0,33.2-26.9,60.2-60.2,60.2c-33.2,0-60.2-26.9-60.2-60.2c0-33.2,26.9-60.2,60.2-60.2C113-65.6,140-38.6,140-5.3"/></g></svg>
schmidt-oliver commented 1 year ago

Hi @lyuma, please try using SVGFixer to outline the icons before converting them to font. It worked like a charm in my case.

jaywcjlove commented 1 year ago

@schmidt-oliver thx!