SVG not rending properly

[TheBrainTeam]

Hi,

This SVG is not rendering properly. I was using 2.1.8 and updated to 2.1.10 and it is still have the issue.

Is there any things that I need to keep in mind when creating, grouping or exporting SVGs?

percent.zip

Also does any of these work as some of the icons generated have height/width in fractions.
--normalize Normalize icons sizes (Default: false)
--mono Make font monospace (Default: false)
--height Fixed font height value

Love the app.

Thank you

[TheBrainTeam]

Issue was fixed by making everything a compound path in illustrator.

But a fix from the package would be better as it needs help from the designers.

[kolohelios]

@TheBrainTeam My recommendation would be to add SVGO to your tool chain to take a pass over your SVGs before you create the font – I believe you'll be most interested in the mergePaths option. I've used SVGO along with this package for awhile and it really cleans SVGs up nicely.

[adripanico]

Issue was fixed by making everything a compound path in illustrator.

But a fix from the package would be better as it needs help from the designers.

I honestly think that designers should take care about where their designs are going to be show. I have lost a lot of time fixing designs that are wonderful to be printed out, but a disaster to be displayed in a web.

[baticodes]

I honestly think that designers should take care about where their designs are going to be show. I have lost a lot of time fixing designs that are wonderful to be printed out, but a disaster to be displayed in a web.

I have the same issue trying to create my own icon font from google material icons.
Using this Google's svg the result is poorly rendered.

icon-font-generator ./src/icons/*.svg -o public/fonts -f /fonts --csspath ./src/_iconfont.css --jsonpath ./src/icons.json --csstp ./src/templates/css.hbs  --html true --htmlpath ./src/demo.html

[adripanico]

I've downloaded it, passed through SVGO (https://jakearchibald.github.io/svgomg/) and the generated font seems ok:

The SVG code:

<svg width="24" height="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>

[KennethJoris]

As @adripanico mentioned: passing an svg to SVGO first would be good. One thing for this to work is missing though:

In the config: files : options.paths expects an url, but SVGO returns a raw svg, not a file.

Would it be possible to pass raw data instead of a path?

[tomonari-t]

As @kolohelios mentioned: passing svgs to SVGO fixed my problem

[BrunnerLivio]

@adripanico Have you used a special SVGO config for this? I have the same problem with the "sketchy" looking icons - even after SVGO execution.

I use the following SVGO config

plugins:
  - convertPathData:
      noSpaceAfterFlags: false
  - mergePaths:
      noSpaceAfterFlags: false

and execute with

svgo icons/*.svg -o dist-icons --config config.yml

Edit as from #45 - setting --height 100 with icon-font-generator fixed it 💯

[arajay]

Using optimized SVGs, the font icons seem to be corrupted any time there is a transform attribute on a path. Removing the transform solves the issue (but then the icon is wrong).

expected.

actual

[michan85]

just to confirm, i also did not use svgo and just setting --height 500 works perfectly,
i used 100 as above but complex icons still seemed a bit funky

[arajay]

My solution was to merge the SVG paths and eliminate transforms before exporting them, then generating the font.

[chemoish]

Does anyone know why you have to use these seemly random configurations?