fix: SVG optimization messes up icons

[itgalaxy]

fix: SVG optimization messes up icons

[mihauco]

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.

[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

[japalo]

@evilebottnawi
I expected this (screenshot from OSx preview:

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

[alexander-akait]

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

[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?

[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 :)

[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.