SVG to font glyphs after path compound not as expected

[maganap]

Hello!

I'm a Flutter developer having a hard time with a set of SVG icons I need to use for our mobile app.

We're converting the set of SVG icons to a font we can use much easier in the app. We're using https://www.fluttericon.com/ , which is pretty common to be used in Flutter.

So, some icons are not shown as expected (the overlapping areas are in "negative").

From the tool's website and from another thread on this forum I read we had to create a compound and then add the segments (or expand stroke, then add). That certainly did the trick with some of the icons, but not with others:

Would you know how to fix this problem? I've tried many combinations of compound, expand, add, etc., to no avail.

Here are the original SVG icons from the examples:

Banknote 01.svgBank.svg

Thank you very much in advance.

 

 

 

[stokerg]

Hi @maganapand Welcome to the Forums,

In order help with this, could you upload the afdesign file for an icon that fails and an afdesign file for one that works, ideally before you've created the compound shape?  If you could make it clear in the filename, which is which. If you'd rather not make them public, please use this Dropbox link. 

Also can you let me know the SVG export settings you are using?

[maganap]

Hi @stokerg, thanks for your reply.

For these files, I opened the original SVG and saved them as afdesign without editing anything.

* ALWAYS-FINE are files that, uploaded as an SVG, they did work well from the beginning.

* EDIT-WORKS are files that, when uploaded, they showed incorrectly. After compound / expand stroke / add, and exported as SVG, they worked as expected.

* EDIT-FAILS is the file that I can't make work,

ALWAYS-FINE-User.afdesignALWAYS-FINE-Bank Card.afdesignEDIT-WORKS-Banknote 01.afdesignEDIT-WORKS-Hand Cart.afdesignEDIT-FAILS-Bank-works.afdesign

 

I exported the SVG like this:

 

Thanks!

[stokerg]

Hi @maganap,

Couple of things here and some of it do with how Flutter previews SVGs, for example.  From speaking with the QA team they have said the following and this is a direct quote  'Looking at it I think Flutter is forcing everything to render with a Winding (Nonzero) Fill Mode and ignoring the fact the SVGs explicitly say to use even-odd fill rule.
The exported SVGs look fine in Inkscape and Chrome. If I open that Bank.svg in Inkscape or Illustrator (both of which also open fine) and save it in there, it imports incorrectly as well. 
Best way for the user to work around this is to just select all three objects in the Bank file and just use Boolean Add, switch the fill mode to Winding and then correct the filled in parts by selecting the path and using Reverse Curve.'

Let me know how that goes  

[maganap]

I need a couple of hours to try that out. I'll let you know!

[stokerg]

On 5/12/2022 at 3:50 PM, maganap said:

I need a couple of hours to try that out. I'll let you know!

If it helps, heres a screen recording of the mentioned method.  Big thanks to @Sean Pfor the recording  

 

 

[maganap]

OMG! It worked!

Video did help a lot, it made me leave what I was doing just to follow along! Thank you for considering the "I'm a developer = I don't really know how to use this tool" part 😅 

Thank you all so much @stokerg @Sean P and the QA team, heroes of the day to me!  ❤️ 😊

Big cheers,