: Incorrect paths in icon font generated from SVG I have a collection of simple SVG icons exported from Illustrator. These contain just a <path> element to conform the icon itself and no
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: 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:
FONT USED IN A WEB PROJECT:
More posts by @Frith110
1 Comments
Sorted by latest first Latest Oldest Best
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.