0

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="973-user-toolbar@2x.png"><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:

ORIGINAL SVG

FONT USED IN A WEB PROJECT:

FONT USED IN A WEB PROJECT

  • This looks like a path rounding issue or a "corner-type" error. Also bear in mind any calculated value that is not an even integer will be rounded so as to fall "on a pixel," and the smaller your typeface, the larger the impact such rounding will have. It would be interesting to see the original SVG as an SVG instead of a PNG. This might reveal something that Illustrator supports but is not strict SVG (etc). – Yorik Mar 2 '17 at 18:00
  • I have edited the question and added the SVG code. It's not possible to attach svg files. As you can see, there are a lot of values that are not integers. Do you know if there is any way to optimise the SVG for font usage? should I try specifying the "corner-type" somehow? Thanks – Pablo Romero Jarén Mar 3 '17 at 5:30
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.

  • Sorry, I missed the part where it says that the height should be 500 at least. Both solutions scaling the svg or fontHeight: 1001 and normalize: solves the problem – Pablo Romero Jarén Mar 3 '17 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.