A lot of product pages have one small moving illustration near a feature: a queue draining, a cache filling, a chart ticking up. It's usually a GIF, a video or a Lottie file. For most of these, an SVG with a few lines of CSS animation inside it is lighter, sharper and easier to keep on brand.

Here's how I add them, the three ways to put one on a page, and the two things people skip: reduced motion and pausing offscreen.

What "animated SVG" means here

An SVG file is code. It can carry its own <style> block, and CSS animations inside that block play wherever the SVG renders. No player script, no video element.…