Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect output for mirrored paths with opposite winding order #158

Open
3 tasks done
lyuma opened this issue Jun 9, 2022 · 0 comments
Open
3 tasks done

Incorrect output for mirrored paths with opposite winding order #158

lyuma opened this issue Jun 9, 2022 · 0 comments

Comments

@lyuma
Copy link

lyuma commented Jun 9, 2022

Issue

I'm a gentledev I:

  • fully read the README recently
  • searched for existing issues
  • checked I'm up to date with the latest version of the project

Expected behavior

screenshot of svgiconfont showing fixed.svg with both eyes
Both eyes are present.

Actual behavior

screenshot of svgiconfont showing bad.svg missing right eye
Right eye is missing, likely due to being mirrored.

Steps to reproduce the behavior

Here are the SVG files I used:

Here is the original icon, created in inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" probably by mirroring the left eye to create the right eye. (This has gone through an optimizer so meta tags were lost.)
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

  1. Go to http://nfroidure.github.io/svgiconfont/
  2. Open bad.svg and then fixed.svg

Alternatively, from command line:

  1. npm install svgicons2svgfont
  2. ./node_modules/.bin/svgicons2svgfont --fontname=godot-icon -o godot-icon-font.svg svg/bad.svg svg/fixed.svg
  3. svg2ttf godot-icon-font.svg godot-icon-font.ttf
  4. View font in https://fontdrop.info/

Debugging informations

  • node -v result:
v16.15.1
  • npm -v result:
8.11.0

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>

I filed this issue earlier on svgtofont but then discovered that this is the upstream library which also reproduces the problem. Glyphter also appears to have the same bug, so it may be using this library on their backend, too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant