Some parts of an SVG were missing and some parts were distorted.
I had to render the SVG via an <svg> element
instead of loading it via an <img> element.
Table of contents
The problem
I was loading an SVG file via an <img> element.
The SVG file had CSS animations embedded in it.
Safari and iOS Safari rendered the SVG in a very buggy way: some parts were missing and some parts were distorted.
The fix
I did some quick googling but didn't find a clear cause. I did find some speak along the lines of "Safari is bad at rendering SVGs."
In the end, the fix was to inline the SVG file.
I.e. render it directly via an <svg> element
instead of loading it via an <img> element.
The downside is that now the file can't be cached by the browser.