Summary
Affinity Designer, as of 1.9, produces SVG exports where at least one simple, hollow shape (donut) is unusable in Xcode or subsequently on iOS
Impact
The problem effectively prevents the use of Affinity Designer by many developers working on the creation of svg assets for the Apple platforms.
Similar issues perhaps for Glowforge users, see https://community.glowforge.com/t/bug-svg-fill-rule-fix/20413
Setup
macOS 11.2.1 (20D74) Intel
Affinity Designer 1.9.0 on
Xcode 12.4 with iOS target 14.0
To reproduce
New document, Presets -> Devices -> iPad Mini
Use Donut tool to create Donut (screenshot "ad donut.png")
Export entire document as SVG (going via Export Persona and slices doesn't make any difference), (e.g. "xcodeProblem.svg")
Open an Xcode project and navigate to an Assets.xcassets
Drag SVG file exported in 3 into the project's Assets.xcassets
Observe that Xcode renders the Donut incorrectly as a solid circle (screenshot "xcode ad broken.png")
Workaround 1
Manually edit the exported SVG file in coding editor such as Vim, Emacs, VSCode
Find the Donut's path element.
Add a "style="fill-rule:evenodd" attribute to the Donut's path (or if there's an existing one amend it to include the "fill-rule:evenodd" value.
Save the file (e.g. "xcodeProblem tweaked style.svg")
File works okay in Xcode, i.e. has empty middle (screenshot "xcode showing broken and both workarounds.png")
Workaround 2
Manually construct the Donut from two Ellipses, the inner of which is drawn with the opposit rotation.
Draw outer ellipse
Draw an inner ellipse
NB: manually mirror the inner ellipse so that its drawing direction is in the opposite direction to the outer.
Align inner with outer
Select both and XOR differentially union together to create singe curves, donut.
Export as SVG and file works okay in Xcode (e.g. "xcodeProblem xor'd different rotations.png")
File works okay in Xcode, i.e. has empty middle (screenshot "xcode showing broken and both workarounds.png")
Tips on how to workaround, were picked up from the Glowforge forum here https://community.glowforge.com/t/bug-svg-fill-rule-fix/20413 where they are encountering a similar issue.
Misc
Likely to have similar issues with other hollow shapes.
Omnigraffle screws this up as well.
Inkscape and Sketch gets it right.
The SVG renders just fine in Firefox, Safari, preview etc, just within Xcode and on iOS
xcodeProblem.svg xcodeProblem tweaked style.svg xcodeProblem xor'd different rotations.svg
