I have an SVG animation which runs well on every browser. But, when zoomed in on Safari, the animation breaks. It looks like the animation is bleeding through the right and bottom edges.

And, this only happens when the SVG is in an img tag. If the SVG is used inline, there is no issue as such.

When the page is zoomed in to 125% on macOS Safari, you'll get,

At first, it looked like an issue with my screen or with my personal preferences set in my browser. But, this is a real issue that I could reproduce on other machines too and also with other animated SVGs. For example, open up https://loading.io/spinner or http://samherbert.net/svg-loaders/ in macOS Safari with a zoom level other than 100% as you'll see the same behavior.

Snippet (save this SVG as a .svg image and use it in an img tag to reproduce this behavior)

<svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
  <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
    <animateTransform
      attributeName="transform"
      type="rotate"
      dur="0.75s"
      values="0 12 12;360 12 12"
      repeatCount="indefinite"
    />
  </path>
</svg>