SVG vs GIF vs Lottie vs Video: Which Should You Use?

Why format matters

Animation on the web isn’t just about aesthetics. File size, CPU/GPU cost, accessibility, cross-platform support and how interactive the animation must be all influence the right choice. Below, we compare SVG, GIF, Lottie and video across common criteria and show practical examples and fallbacks.

Quick summary

• SVG — Best for icons, UI micro‑animations, and scalable vector motion. Tiny files for simple shapes, accessible and interactive.
• GIF — Best for email and universal playback. Raster, no interactivity, often large and CPU‑heavy.
• Lottie — Great for complex vector animations from After Effects that need interactive control and small-ish JSON payloads, but requires a runtime.
• Video (MP4/WebM) — Best for photorealistic, long or full‑screen hero motion. Hardware accelerated but heavier and less interactive.

Comparison by criteria

Scalability and quality

SVG and Lottie are vector‑based and scale crisply at any resolution. GIF and standard MP4 are raster — they pixelate on large displays. WebM with alpha can exist, but support and workflow are more complex.

File size and performance

• Simple SVG icon animations: often a few KB.
• Lottie: typically tens to low hundreds of KB depending on complexity (shapes, gradients, images).
• GIF: typically larger than equivalent Lottie/SVG; CPU decoding can be expensive.
• Video: compressed efficiently (MP4/WebM) and hardware‑accelerated; short clips still can be hundreds of KB to MBs.

Interactivity and control

SVG and Lottie allow timeline control, seek, play/pause, and respond to user input. Video supports basic controls and Web APIs (Media API), but linking animation states to application logic is easiest with SVG or Lottie.

Browser & platform support

• SVG — universally supported in browsers and accessible via CSS/JS.
• Lottie — supported where JavaScript can run; use lottie-web for the browser. Not supported in email clients.
• GIF — supported everywhere including email and older clients.
• Video — MP4 and WebM support varies by codec; generally well supported in modern browsers, not in all email clients.

Accessibility

SVG and Lottie can be made accessible (ARIA labels, aria-hidden, and prefers-reduced-motion support). For GIFs and videos, provide alternate text, transcripts, and obey reduced‑motion preferences where possible.

Practical examples

Inline SVG with CSS animation

Use inline SVG for tiny UI animations to keep interaction and accessibility intact.

<svg width="120" height="120" viewBox="0 0 24 24" role="img" aria-label="loading">
  <circle cx="12" cy="12" r="10" fill="none" stroke="#1e90ff" stroke-width="2">
    <animate attributeName="stroke-dashoffset" from="0" to="31.4" dur="1s" repeatCount="indefinite"/>
  </circle>
</svg>

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  svg * { animation: none !important; }
}

Lottie (export from After Effects)

Export with Bodymovin to a JSON file and load with lottie-web. Lottie gives powerful AE features in a small, interactive package.

// Example usage (assumes lottie-web is loaded)
var animation = lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/hero.json'
});

// Control it programmatically:
animation.goToAndStop(120, true);

Video for hero backgrounds

Use video when you need photorealism or long motion that compressors handle better than frame sequences.

<video autoplay muted loop playsinline poster="/images/hero-poster.jpg">
  <source src="/videos/hero.webm" type="video/webm">
  <source src="/videos/hero.mp4" type="video/mp4">
  Sorry, your browser doesn’t support embedded videos.
</video>

GIF in email

GIFs remain the most reliable animation format for email clients. Keep them short and optimized; use a static fallback frame where needed.

Best practices and fallbacks

• Always respect prefers-reduced-motion; provide a static fallback or reduced animation.
• Provide alt text for GIFs and ARIA labels for SVG/Lottie containers for screen readers.
• Use vector formats (SVG/Lottie) for icons and UI motion; they scale and are interactive.
• Choose Lottie when you need After Effects-level motion but keep an eye on runtime size and dependency on JavaScript.
• Use GIF for email and legacy compatibility, but optimize and avoid long loops.
• Use video for long, complex or photographic motion; include poster images and multiple codecs for cross‑browser compatibility.

Decision checklist

• If you need crisp, tiny, interactive UI animation → SVG.
• If animation comes from After Effects and needs timeline control → Lottie.
• If you need guaranteed playback in email or very old clients → GIF.
• If you need photo/video realism or a hero background → MP4/WebM video.

Final thoughts

There’s no single “best” format—only the right one for your use case. Favor SVG and Lottie for modern UI motion and interactivity, GIF for email and legacy contexts, and video for rich, photographic sequences. Always measure actual file sizes, test on target devices, and layer in accessible fallbacks and reduced‑motion options to keep your animations performant and inclusive.