You can animate an .svg and it will play even with an `` or `background-image`, making it a viable GIF replacement if you can pull it off!

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

Animated SVGs can replace heavy animated GIFs with dramatically smaller file sizes while maintaining infinite scalability. The technique involves embedding CSS animations directly within SVG files, which continue to work when loaded via img tags or background-image properties. A zombie accordion example demonstrates 98% file size reduction compared to GIF equivalent. Some media queries work within SVGs, but limitations include no hover effects, no prefers-reduced-motion support, and restricted JavaScript execution.

Replace Your Animated GIFs with SVGs – Frontend Masters Blog

<p>Yes lets do the svgs. But. There’s no ready solution or software for animating it properly</p>
