nfroidure/svgicons2svgfont

SVG Does Not Convert Correctly

Closed this issue · 7 comments

TrevorKarjanis commented
  • [x ] fully read the README recently
  • [x ] searched for existing issues
  • [x ] checked i'm up to date with the latest version of the project

Expected behavior

I have a set of SVG icons I am converting to a font. They all convert well except for a subset that are circular. An example SVG is the following.

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.54.51,3.77,1.65l.64,1.56A6.28,6.28,0,0,0,3.23,4.39L1.67,3.75.51,6.51l1.56.65a5.91,5.91,0,0,0,0,1.68L.51,9.48l1.14,2.77,1.56-.64a6.28,6.28,0,0,0,1.18,1.18l-.64,1.56L6.51,15.5,7.16,14A6.07,6.07,0,0,0,8,14,5.9,5.9,0,0,0,8.84,14l.64,1.56,2.77-1.14-.64-1.56a6.64,6.64,0,0,0,1.19-1.18l1.55.64,1.16-2.76L14,8.86a5.91,5.91,0,0,0,0-1.68l1.56-.64L14.37,3.77l-1.56.64a6.33,6.33,0,0,0-1.18-1.19l.64-1.55L9.51.51,8.86,2.07A6.07,6.07,0,0,0,8,2a5.79,5.79,0,0,0-.83.06ZM8,11.76a3.67,3.67,0,0,1-1.44-.29A3.75,3.75,0,0,1,8,4.26a3.67,3.67,0,0,1,1.44.29A3.75,3.75,0,0,1,8,11.76M8,6.51a1.5,1.5,0,1,0,.58.12A1.5,1.5,0,0,0,8,6.51"/></svg>

Actual behavior

The font glyph is converted to the following (SVG on the left and font on the right).
example

Steps to reproduce the behavior

I created the font with the following command.

svgicons2svgfont -o test.svg test.svg

Debugging informations

  • node -v result:
v8.9.4
  • npm -v result:
5.6.0

svgicons2svgfont version 9.0.0

TrevorKarjanis commented

After validating the SVG with FontForge, I would guess this is due to rounding non-integral coordinates when converting to the TrueType font.

TrevorKarjanis commented

I am closing this issue, because it is not related to this component. For reference, see the following issue.
jesseweed/seti-ui#401

NaridaL commented

@TrevorKarjanis yes, that's why there's a "fontHeight" option here. Did you have it set to >= 1000 ?

TrevorKarjanis commented

I did, however, that only seems to increase the view box. The icon does not scale with it. It displays smaller within the view box and is still mangled.

example

NaridaL commented

Ugh, looks like the CLI doesn't pass the value correctly... https://github.com/nfroidure/svgicons2svgfont/blob/master/bin/svgicons2svgfont.js#L82 . It should be fontHeight. So you actually shouldn't be seeing any difference? I'll publish a patch in any case. This is what happens when you don't use typescript XD

NaridaL commented

Try 9.0.1.

TrevorKarjanis commented

That fixed it. Thank you very much!