- Issue: Overlapping paths in an SF Symbol render as cutouts instead of fills on the overlapping spots.
- Solution: This can apparently be solved—at least in this case—by reversing the path order of the overlapping paths.
As you can see in Github's rendering of the SF Symbol shirt.ripped-sfsymbol-incorrect.svg, the three shirt renderings render completely black, without cutouts in the shirt's outline.
However, when you drag the file into the SF Symbols app, you can see that SF Symbols somehow uses a different rendering, and the overlap of the ripped parts of the shirt with its outline are cut out (i.e. not filled) instead. But this doesn't appear to happen with the collar, that also overlaps with the outline.
With some help, we figured out that reversing the path's node order can solve this. By reversing the paths of the 'rip' shapes, we can convince SF Symbols to render the icon with fills instead of cutouts.
The question still remains why it didn't work in the first place, since even macOS' own preview rendering of the SVG shows it correctly.
- The vector file is adjusted to be more compact in Sketch. It opens in SF Symbols app, but won't open in Xcode.
