search

fontello / svg2ttf

SVG -> TTF font convertor
MIT License
518 stars 79 forks source link

Visually identical icons with different <path> definitions are not exported the same #89

Closed hdodov closed 4 years ago

hdodov commented 4 years ago

I'm using svg2ttf via @vusion/webfonts-generator via webfonts-loader via Webpack.

I noticed one icon wasn't being generated correctly and started digging. I managed to create two visually identical icons with different paths, but one is displayed correctly in the font and one isn't.

These are direct exports from Figma:

arrow-good.svg

<svg width="32" height="25" viewBox="0 0 32 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.09279e-06 12.5C1.14782e-06 11.8705 0.29639 11.2777 0.8 10.9L14.8 0.400017C15.406 -0.0545097 16.2169 -0.12762 16.8944 0.211163C17.572 0.549948 18 1.24247 18 2.00002L18 9.00002L28.5 9.00002C30.433 9.00002 32 10.567 32 12.5C32 14.433 30.433 16 28.5 16L18 16L18 23C18 23.7576 17.572 24.4501 16.8944 24.7889C16.2169 25.1277 15.406 25.0545 14.8 24.6L0.8 14.1C0.29639 13.7223 1.03775e-06 13.1295 1.09279e-06 12.5ZM2 12.5L16 23L16 14L28.5 14C29.3284 14 30 13.3284 30 12.5C30 11.6716 29.3284 11 28.5 11L16 11L16 2.00002L2 12.5Z" fill="black"/>
</svg>

arrow-bad.svg

<svg width="32" height="25" viewBox="0 0 32 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 11H28.5C29.3284 11 30 11.6716 30 12.5C30 13.3284 29.3284 14 28.5 14L16 14V23L2 12.5L16 2V11ZM18 16V23C18 23.7575 17.572 24.4501 16.8944 24.7888C16.2169 25.1276 15.406 25.0545 14.8 24.6L0.800001 14.1C0.296389 13.7223 2.38419e-07 13.1295 0 12.5C-2.38418e-07 11.8705 0.296388 11.2777 0.8 10.9L14.8 0.399996C15.406 -0.0545303 16.2169 -0.127642 16.8944 0.211142C17.572 0.549926 18 1.24245 18 2V8.99998H28.5C30.433 8.99998 32 10.567 32 12.5C32 14.433 30.433 16 28.5 16L18 16Z" fill="black"/>
</svg>

There are obvious differences in the paths, but I don't know what exactly they represent. I just played around and drew a bunch of arrows until one of them started to work. My guess is that it has something to deal with the direction in which they're drawn.

This is a screen capture from the rendered glyphs in the browser:

image

The version of svg2ttf is 4.3.0 and the same issue happens if I drag and drop the SVG files in the online Fontello generator itself.

hdodov commented 4 years ago

I managed to get an even more minimal example with a simpler shape. I used svg-path-parser to make the paths more readable.

Working:

<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.22666 12.42L0.333336 6.50001L8.1419 0.643585L12.7687 5.93137L8.22666 12.42ZM8 11L11.5 6.00001L8 2.00001L2 6.50001L8 11Z" fill="black"/>
</svg>
0: Object {code: "M", command: "moveto", x: 8.22666, y: 12.42}
1: Object {code: "L", command: "lineto", x: 0.333336, y: 6.50001}
2: Object {code: "L", command: "lineto", x: 8.1419, y: 0.643585}
3: Object {code: "L", command: "lineto", x: 12.7687, y: 5.93137}
4: Object {code: "L", command: "lineto", x: 8.22666, y: 12.42}
5: Object {code: "Z", command: "closepath"}
6: Object {code: "M", command: "moveto", x: 8, y: 11}
7: Object {code: "L", command: "lineto", x: 11.5, y: 6.00001}
8: Object {code: "L", command: "lineto", x: 8, y: 2.00001}
9: Object {code: "L", command: "lineto", x: 2, y: 6.50001}
10: Object {code: "L", command: "lineto", x: 8, y: 11}
11: Object {code: "Z", command: "closepath"}

Not working:

<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.361 12.2281L0.358917 6.50002L14.2823 0.804077L18.7687 5.93137L14.361 12.2281ZM14 2.00002L17.5 6.00002L14 11L3 6.50002L14 2.00002Z" fill="black"/>
</svg>
0: Object {code: "M", command: "moveto", x: 14.361, y: 12.2281}
1: Object {code: "L", command: "lineto", x: 0.358917, y: 6.50002}
2: Object {code: "L", command: "lineto", x: 14.2823, y: 0.804077}
3: Object {code: "L", command: "lineto", x: 18.7687, y: 5.93137}
4: Object {code: "L", command: "lineto", x: 14.361, y: 12.2281}
5: Object {code: "Z", command: "closepath"}
6: Object {code: "M", command: "moveto", x: 14, y: 2.00002}
7: Object {code: "L", command: "lineto", x: 17.5, y: 6.00002}
8: Object {code: "L", command: "lineto", x: 14, y: 11}
9: Object {code: "L", command: "lineto", x: 3, y: 6.50002}
10: Object {code: "L", command: "lineto", x: 14, y: 2.00002}
11: Object {code: "Z", command: "closepath"}
puzrin commented 4 years ago

https://github.com/fontello/fontello/wiki/How-to-use-custom-images

You need to remove all "fill*" attrs and make contours properly oriented instead.

hdodov commented 4 years ago

@puzrin I tried that, but I still get an incorrect icon. I'm exporting it from Figma, though. The exact steps I'm doing are:

  1. Draw the shape in counter-clockwise direction
  2. Set the stroke mode to "outside" and not "center" (the default)
  3. Click "Outline Stroke" so that the stroke is turned to a single
  4. Export

I can see there's a guide for exporting from Inkscape and Illustrator. Maybe you could add one for Figma? It has turned pretty mainstream. They recently launched support for plugins too. Perhaps there could be a plugin that fixes paths, or even one that directly generates fonts from layers? That would be so cool.

puzrin commented 4 years ago

Sorry, can't consult about Figma. This is just a convertor, it needs correct input svg font. If font is correct, result will be correct.