Animated SVGs Use High CPU and Freeze when used as an Image

An SVG animated with CSS @keyframes defined in the SVG itself (not the page's CSS) will use high CPU on Firefox if the SVG is linked to in the src attribute of an <img> tag, or linked to in a background-image CSS property on the page. In addition, an animated SVG in a background-image may freeze on chromium.

I tested different ways of putting an animated SVG on a page; the option that performed best was the <object> tag, inline svg was a close second.