nfroidure/svgicons2svgfont

Incorrect output for mirrored paths with opposite winding order

Opened this issue · 0 comments

lyuma commented

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.