Incorrect paths in icon font generated from SVG

Question

I have a collection of simple SVG icons exported from Illustrator. These contain just a <path> element to conform the icon itself and no borders. The original SVG format seems to be correct but within the generated font, the icon borderline seem to be broken; displaying sharp corners and irregular lines. To generate the font I'm using this script: https://github.com/nfroidure/gulp-iconfont.

Does someone know what could be causing this? Is this related with the CSS? The Illustrator export? Or how the font was created?

Here is the original SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><title>users</title><g id="_973-user-toolbar_2x.png" data-name="[email protected]"><path d="M32.34,30.59A3.64,3.64,0,0,1,30,28.3c-.41-1.69,1.06-3.54,1.06-3.54h0c.11-.11,2-3.68,2-9.48C33,10.87,31.25,6,25,6s-8,4.87-8,9.29a21,21,0,0,0,1.91,9.42S20.41,26.6,20,28.3a3.63,3.63,0,0,1-2.35,2.29C8.62,33.4,3,34.71,3,37.25V40a2.15,2.15,0,0,0,2,2H45a2.15,2.15,0,0,0,2-2V37.25C47,34.71,41.38,33.4,32.34,30.59ZM45,39.91l-.09.09H5.09L5,39.91V37.34c.68-1,9.82-3.79,9.82-3.79s6.21-1.39,7.13-4.79c.55-2.3-.88-4.48-1.37-5.14A20,20,0,0,1,19,15.29C19,10.45,21,8,25,8s6,2.45,6,7.29a20.05,20.05,0,0,1-1.58,8.27l-.67,1.09a5.89,5.89,0,0,0-.71,4.12c.83,3.47,6,4.45,7.13,4.78,4.29,1.3,9.13,2.78,9.81,3.79Z"/></g></svg>

Here how it looks.

ORIGINAL SVG:

FONT USED IN A WEB PROJECT:

Answer 1

It's almost certainly a problem with the generated font.

The gulp-iconfont README says:

If some font glyphs aren't converted properly you should add the normalize:true option and a fontHeight greater than 1000 (fontHeight: 1001).

Regarding the SVG, It also says:

Preparing SVG's

Beware that your SVG icons must have a high enough height. 500 is a minimum. If you do not want to resize them, you can try to combine the fontHeight and the normalize option to get them in a correct size.

...

Save your file as SVG with the following settings:

• SVG Profiles: SVG 1.1
• Fonts Type: SVG
• Fonts Subsetting: None
• Options Image Location: Embed
• Advanced Options
  • CSS Properties: Presentation Attributes
  • Decimal Places: 1
  • Encoding: UTF-8
  • Output fewer elements: check

---

Your SVG is on a 50 × 50 viewbox so that is likely the problem. You should try regenerating the font with your SVG resized to a more appropriate size and/or try generating using some combination of fontHeight and normalize options.

You should try and reduce your SVG to the minimum needed too, so remove any unnecessary groups or elements.

This is your SVG resaved from Illustrator at 1000 × 1000:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1000px" height="1000px" viewBox="0 0 1000 1000" xml:space="preserve">
    <path d="M646.8,611.8c-22-7-39.3-24-46.8-45.8c-8.2-33.8,21.2-70.8,21.2-70.8l0,0c2.2-2.2,40-73.6,40-189.6C660,217.4,625,120,500,120s-160,97.4-160,185.8c-2,64.9,11.1,129.4,38.2,188.4c0,0,30,37.8,21.8,71.8c-7.5,21.9-24.9,38.9-47,45.8C172.4,668,60,694.2,60,745v55c1.5,21.5,18.5,38.5,40,40h800c21.5-1.5,38.5-18.5,40-40v-55C940,694.2,827.6,668,646.8,611.8zM900,798.2l-1.8,1.8H101.8l-1.8-1.8v-51.4c13.6-20,196.4-75.8,196.4-75.8s124.2-27.8,142.6-95.8c11-46-17.6-89.6-27.4-102.8C389.3,419.8,378.5,363,380,305.8C380,209,420,160,500,160s120,49,120,145.8c1.3,56.7-9.5,113.1-31.6,165.4L575,493c-14.7,24.8-19.7,54.1-14.2,82.4c16.6,69.4,120,89,142.6,95.6c85.8,26,182.6,55.6,196.2,75.8L900,798.2z"/>
</svg>

---

Note, I've never used gulp-iconfont so am only going off the instructions in the README.