Nested circle paths break on Android

I ran into this issue when trying to put social icons inside some circles, but found out the issue was generated when there was a path that had a circle cut out of another circle (cutting a rectangle out didn’t seem to reproduce it).

Here is some simple svg that causes the issue (created with Sketch. I’ve used svgo to get rid of extraneous stuff but the issue occurs with or without the optimisation)

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <title>facebook-logo</title>
    <desc>Created with Sketch.</desc>
    <g fill="none" fill-rule="evenodd">
        <g fill="#D8D8D8">
            <path d="M25 50c13.807 0 25-11.193 25-25S38.807 0 25 0 0 11.193 0 25s11.193 25 25 25zm0-6c10.493 0 19-8.507 19-19S35.493 6 25 6 6 14.507 6 25s8.507 19 19 19z"/>
        </g>
    </g>
</svg>

Expected output (Chrome in OSX):

Damaged output (Chrome in Android 5.0)

The really interesting thing is that this happens in every browser on Android. I tried Firefox and the default AOSP browser (in the emulator) and I got a similar result. I think this is a collision of an Android bug and an interesting handling of ttf files from Fontello.

I originally discovered this using gulp-fonticon, but I’m assuming that the error is happening here because the TTF and WOFF files are affected, and the same issue happens when using the Fontello website.

I’m just charging up an Android 4 device in the house to see if the same thing happens.

[Pinpickle]

This did occur on Android 4 as well. Interestingly enough, the culprit SVG files rendered incorrectly in Illustrator as well - even though it was a compound path with one circle inside another.

Turns out its the path direction thats causing all of these issues. Sketch exports with the “evenodd” fill rule for path cutouts but it would seem that no matter what, the Android font renderer and Illustrator will interpret that as “nonzero”. In evenodd, path direction doesn’t matter but in nonzero it does - the paths need to be in alternating direction for the cutouts to be successful. I have no idea how these fill rules translate to the ttf spec.

In any case, reversing the path direction in Sketch manually fixes the issue. I would call this a bug with Illustrator/Android (and likely many other programs), but its a bug that Sketch should account for so I’ve filed a bug report.

I’m not sure what this library could do, maybe it can make sure paths are in alternating directions or just leave it to us? I feel like if the library took matters into its own hands, it would just cause more problems.

[mediafreakch]

@Pinpickle Do you have a Sketch issue# to follow up?