Sketchapp and fill-rule="evenodd"

[ryan...@gmail.com]

Hi Keyamoon,

Any update on when evenodd might be supported?

I'm creating icons with Sketch and despite using proper layer practices (black fills only, appropriate union/subtraction operations), it seems Sketch always exports using evenodd. As a result, icons such as the battery example below render unintentionally filled.

Intended icon pic: http://cloud.ryanmatic.com/image/0F2O2J0B2J1l
Source layers pic: http://cloud.ryanmatic.com/image/0p3t0C0f0k3U
IcoMoon rendering pic: http://cloud.ryanmatic.com/image/0G11201Z0x0j
Actual battery SVG: http://cloud.ryanmatic.com/1O3I2X433t10

Thx,
ryan

[Keyamoon]

Hi,

evenodd is complex and supporting it would take some time. Even adobe illustrator isn't supporting it. I'll try to implement it in 2 months or so.

[ryan...@gmail.com]

Gotcha. Thanks for the quick reply.

[loren....@gmail.com]

For anyone having this problem with Sketch app, I've found that flattening the paths in the shape as much as possible (Edit > Paths > Flatten), then selecting individual cutout paths and hitting Edit > Paths > Reverse Order can help solve this issue. You'll know it worked when, while hovering the cut out parts of your shape, the paths no longer highlight (as if you're not hovering the shape at all).

This is confusing and dumb, but it works due to the fact that paths have directionality, and Sketch will use the evenodd fill rule if that directionality combines in a certain way. See illustrations here: http://www.w3.org/TR/SVG/painting.html#FillRuleProperty

[alain.g...@gmail.com]

Any news about the even-odd support? I guess a lot of people switched to sketch 3 and would love to create icon-fonts with it.

[Keyamoon]

It's still not supported. Doesn't sketch let you use binary operations (subtract, unite, etc.) similar to how Illustrator does it? Or maybe it would have some option to subtract paths without using the evenodd fill rule?

[alain.g...@gmail.com]

Unfortunately not. They use the concept of nondestructive subtracts, unites etc. Which makes sense to change the shapes after combining them. You can't merge them entirely to one shape. Not sure if they want to include this functionality.

[Keyamoon]

Supporting evenodd would basically mean implementing binary shape operations. It will be supported in IcoMoon eventually, but it would have been nice to have a workaround for now. The comment here was mentioning something about flattening shapes in Sketch.

[el...@magneto.me]

"For anyone having this problem with Sketch app, I've found that flattening the paths in the shape as much as possible (Edit > Paths > Flatten), then selecting individual cutout paths and hitting Edit > Paths > Reverse Order can help solve this issue. You'll know it worked when, while hovering the cut out parts of your shape, the paths no longer highlight (as if you're not hovering the shape at all)."

This was a HUGE help for me and solved my problem, esp the Reverse Order trick for "inner" or "nested" shapes. Was getting driven batty by this for several hours and couldn't figure out what was wrong (I'm not really a graphics person).