With constant development and releases it’s easy to forget what the bad old days of working around unfixed browser bugs were like. A great way to remind yourself is to use new features - in this case, SVG.
For compatibility with older browsers, even those with SVG support, it’s sometimes worth embedding images using <object> (as in this roundup of how to get consistent browser behaviour). But, with the current round of modern browsers, an <img> tag should work fine.
SVG’s process for determining the size an image should be rendered at is fairly involved. I should be able to leave the size in the SVG file unspecified and then specify width and height in my img tag:
Firefox is fine with that, but Safari on iOS (Mobile Safari?) gets confused — the result is distorted inconsistently:
So, let’s include a size in the underlying SVG. This won’t affect the display size, because we’re setting that in the HTML, but it works around that bug:
Problem solved!
Using <object> is a great way to get backwards compatibility. Make the SVG an object and embed an img tag pointing at a fallback bitmap:
PNG: 
SVG, with PNG fallback:
WebKit shows the image using the size of the underlying SVG rather than the <object> size, so you need a specific file for each size you’re using the image at. Chromium will also sometimes give you scrollbars even when the SVG and object sizes match, but hopefully that’ll be fixed somewhere in Chrome’s ruthless upgrade schedule.
)