Error with Icons containing circles: some circles will be filled, although they shouldn't

[scrapix]

Icon creation + SVG export tool: figma OS: OS X BigSur Browsers: Safari, Firefox, Chrome fantasticon version: 1.1.1

Problem no matter how I create Icons, some circles get filled unexpectedly

Icon Creation in 4 different ways

• decision-tree2: only centered strokes
• decision-tree3: converted strokes to paths
• decision-tree4: unioned together everything
• decision-tree5: flattened result

Result

[tancredi]

Hi @scrapix - can you share your SVG? I would imagine there's a transparent fill circle somewhere in there :)

[scrapix]

Hi @tancredi , thanks for the quick reply. Sure, here are the SVGs: Archive.zip

[scrapix]

I've double-checked the svg in Adobe illustrator and in Atom. There seems to be no additional object withing the SVG. Also interesting is, that all circles are copies of one object. So it's unclear why some get a fill, while others not. :-O

[tancredi]

Yes, decision-tree5 looks fine and should work - in facts, I tested it in an icon set and it renders correctly post-generation for me.

[tancredi]

Really strange - are you sure it's the same exact version of the SVG that was used for that reported test?

[scrapix]

Super strange indeed! Super sure, that I'm using the same SVG.

So here is my terminal:

Here is the whole directory with the source Icons + generated font: icons-test.zip

Note I've created (from scratch) the same Icon, with the same steps in Adobe Illustrator --> Adobe Illustrator SVG: Work perfectly --> Figma SVG: not working

Result

[stupidkitty]

Same on ubuntu 20.04

[samschooler]

I've had this issue with similar icons. The icons look correct on macOS Catalina, however are filled on macOS Big Sur.

[rhenriquez28]

I'm having the exact same issue

[giovanni-bertoncelli]

Same identical issue on Catalina... is there any workaround on this? Maybe it is related to this: https://github.com/nfroidure/svgicons2svgfont/issues/62

[miguelsolorio]

I've been encountering this issue for a number of years, even in the previous icon-font-generator version, and I believe it does come down to how Figma is exporting SVGs. A simple square with outline strokes:

Generates this SVG code in Figma:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H2V14H14V2ZM1 1V15H15V1H1Z" fill="white"/>
</svg>

While the same icon in Illustrator is exported as:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2V14H2V2H14ZM15 1H1V15H15V1Z" fill="white"/>
</svg>

The main difference is that Figma is using fill-rule="evenodd" and Illustrator does not and composes the path differently:

Figma

<path d="M14 2H2V14H14V2ZM1 1V15H15V1H1Z" />

Illustrator

<path d="M14 2V14H2V2H14ZM15 1H1V15H15V1Z" />

I filled this on the Figma forum in case anyone wants to upvote

[uyarn]

same issue with figma export + fill-rule="evenodd"

[miguelsolorio]

I learned that there is a "Fill Rule Editor" Figma plugin that allows you to toggle the fill rules and properly export svgs to be used with font tools like fantasticon. I've been using this as an alternative and it's working well.

[receptiryaki]

Fill Rule Editor has not worked for me. But I've re-created the icon in Vectornator software on MacOS. It exported without any issue now.

[vdcrea]

This package works like a charm https://www.npmjs.com/package/svg-reorient and fixed my output. After running it against the files all clip-rule="evenodd" are removed and the font is perfect.