Icon cut in half after converting from svg

Socolin commented 4 years ago

Hello,

I'm trying to create a font from icons (3000+) and It almost works on all icons, but there is one for which I have a problem with.

So this is the input svg file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M430.516 311.484a174.516 174.516 0 0 1-349.032 0C81.484 158.019 256 26 256 26s174.516 132.02 174.516 285.484zm-52.264 0c0-35.326-12.532-73.833-37.27-114.452-22.985-37.754-51.972-69.798-72.236-90.029L256 94.303l-12.7 12.734c-20.232 20.231-49.061 52.264-72.08 89.984-24.884 40.788-37.495 79.294-37.495 114.463a122.264 122.264 0 0 0 244.527 0zm-17.983 0a104.275 104.275 0 0 1-208.55 0c0-70.81 58.21-145.518 104.326-191.746 46.588 46.498 104.224 120.645 104.224 191.746zM256.067 144.015c-33.257 35.63-87.488 103.561-87.488 167.469A87.51 87.51 0 0 0 256 398.894c-157.724-92.513-1.9-234.31.079-254.901z" fill="#000"/></svg>

I convert it to a svg fonts with svgicons2svgfont then I got this, the svg seems Ok (a bit outside the box but I think it's normal I had to add an offset or all icons are like 2 pixels too high) I use the following options

SVGIcons2SVGFontStream({
        fontHeight: 1024,
        descent: 150,
        round: 10e2
})

    <glyph glyph-name="topaz"
      unicode="&#xFFD82;"
      horiz-adv-x="1024" d="M861.032 251.032A349.032 349.032 0 0 0 162.968 251.032C162.968 557.962 512 822 512 822S861.032 557.96 861.032 251.032zM756.504 251.032C756.504 321.684 731.44 398.698 681.964 479.936C635.994 555.444 578.02 619.532 537.492 659.994L512 685.394L486.6 659.926C446.136 619.464 388.478 555.398 342.44 479.958C292.672 398.382 267.45 321.37 267.45 251.032A244.528 244.528 0 0 1 756.504 251.032zM720.538 251.032A208.55 208.55 0 0 0 303.438 251.032C303.438 392.652 419.858 542.068 512.09 634.524C605.266 541.528 720.538 393.234 720.538 251.032zM512.134 585.97C445.62 514.71 337.158 378.848 337.158 251.032A175.02 175.02 0 0 1 512 76.212C196.552 261.238 508.2 544.832 512.158 586.014z" />

Then I convert it to ttf:

    const ttf = svg2ttf(fs.readFileSync(fontFile, 'utf8'), {});
    let ttfFilePath = fontFile.replace('.svg', '.ttf');
    fs.writeFileSync(ttfFilePath, new Buffer(ttf.buffer));

That thats the result

And what is should looks like

Regards,

puzrin commented 4 years ago

I can not respond for output of third party packages. Tried to import your icon into fontello and create font - works as expected. It uses the same sfg2ttf. You can also try import svg font to check what happens.

Also, if you suspect math ptoblems, i'd suggest you first to replace arcs with ordinary bezier curves. Arcs are source of most problems in transform libs.

Socolin commented 4 years ago

Thanks for you answer, it helped me to know where to search and I found out the problem. I had an old version of svg2ttf in my packages.json.

Sorry for the noise.

fontello / svg2ttf

Icon cut in half after converting from svg #88