fix: SVG optimization messes up icons

[japalo]

When adding complex icons some SVG optimization messes up the icons.

I can't find any related issues or similar threads, but if anyone knows a fix/workaround please tell me or point me in the right direction. :)

Example where icon fails: `

`

Using this npm script: "webfont-gen": "webfont ./src/icons/*.svg --dest ./pat-to-dest -f icon --center-horizontally --fixed-width --template ./path-to-template --dest-styles ./path-to-dest/ --css-template-font-path /path-to-css-template/"

EDIT: I forgot to tell you what i actually expect. I would either like a fix for my problems, or a way to "turn off" the optimization in my npm script.

[alexander-akait]

@japalo can your provide what your expected and what is actually happens?

[japalo]

@evilebottnawi I expected this (screenshot from OSx preview:

And i got this (screenshot from webpage where icon font has rendered font from SVG):

[japalo]

When i tried to boost up the size of the icons to 512px 512px instead of 56px 56px the lines smoothed out a bit, but the fill was weird instead. Will try to edit SVGs in order to update you.

[alexander-akait]

@japalo do your use svgo or some similar tools?

[japalo]

Worked with the designer and we found out after multiple SVG export form illustrator and sketch that:

1. Sketch export did not work at all for this. Something with the fill-mode i suppose. Either the fills where behaving unexpectedly or the fills where inverted.
2. Illustrator needs to export a large SVG. We used 512px*512px
3. All shapes needs to be finalized and using "Compound path".

I think this was/is issues that touches both the SVG export and the rendering of fonts. The SVG export from illustrator seems to have issues when exporting small sized complex shapes. This in turn made the generator confused while optimizing the icon.

The safe way of working with this seems to be to go large. I am not sure why, since SVGs are using bezier curves, but this is probably nice to mention in the readme and could be worth looking into in the future. :)

Thanks for letting me rubberduck debug this over here. Hope it helps some else! :D

[alexander-akait]

@japalo great! If you have the time to do PR (add this caveat to readme), I will be happy, thanks!

[machty]

@japalo Thanks for sharing your notes; was running into issues of lossiness for a particular icon that went away when I resized to 512x512 (and added the --normalize flag)

[lwojciechowski]

I found out that the problem was related to the low units-per-em in svg's font-face definition. I solved it putting there empty svg that had size of 600px x 600px and the font-face adjusted units-per-em to the biggest svg image it found. It works fine like this :)

[mich418]

It's not a webfont bug, it's a problem with svgicons2svgfont package. And solution is quite simple. You don't need to export big svg images from Illustrator, or add empty svg images with big size, just set propper options in config - fontHeight: 600 and normalize: true.

[jimmyandrade]

When adding complex icons some SVG optimization messes up the icons.

@japalo were you able to solve the problem after the suggestion of @noiff? If so, I would like to close this issue. Otherwise, feel free to respond and I will try to help you.

[japalo]

@jimmyandrade oh, this was a long time ago i actually can't remember. That must have been the solution since i didn't comment anything further.

I will close this issue, and thank @noiff for the solution I must have missed to do two years back.

[jimmyandrade]

@japalo no prob 😄 Feel free to reopen the issue, in case you encounter this problem again.

And sorry for the delay in answering, we are resuming activities in this repository now, as we have more people contributing.