search

Workshape / icon-font-generator

Easy-to-use, pre-configured cli tool to generate webfont icon kits from a bunch of .svg files
MIT License
471 stars 76 forks source link

Generated fonts with evenodd fill rule not rendering properly in Windows #82

Closed symphony-adnane closed 4 years ago

symphony-adnane commented 4 years ago

Hello all, I'm facing a kind of bizarre issue with some svg icons, after generating fonts, they'd appear as expected under Mac, but totally wrong in windows. Example with this circle alert icon:

alert-round.svg.zip Under Mac: image Under Windows: image

I used SVGO to cleanup all my icons, but not solving the issue. Note that this doesn't happen with all the icons, some of them would render just perfect Thanks in advance

tancredi commented 4 years ago

Try this

alert-round.svg-2.zip

symphony-adnane commented 4 years ago

Thank you @tancredi this worked perfect, May you explain what happened :) , why is this happening only on Windows? I have several of them giving the same issue

tancredi commented 4 years ago

Not sure about windows, just opened the SVG in Illustrator and fixed it up as it displayed like so:

Screenshot 2020-10-07 at 15 58 59

May be the use of fill-rule="evenodd" but I'm really not that versed in SVG specifications

symphony-adnane commented 4 years ago

oh ok thanks anyway for pointing that out

symphony-adnane commented 4 years ago

Fixed by reworking the SVGs to avoid evenodd filling rule. This is a common problem preventing Fonts and Android svg rendering from working properly There is this awesome plugin that helps converting from even odd to non-zero

https://twitter.com/evanwallace/status/1189594907989565440