Animated SVG vs Lottie vs GIF vs video: which should you use?

Use animated SVG for icons, logos, loaders and simple illustrations on the web. Use Lottie when a designer builds the motion in After Effects and it must run on web and mobile. Use video for anything photographic or long. Use GIF only where nothing else is accepted, such as many email clients and chat apps.

The quick decision

• Vector graphic, a few seconds of looping motion, web only: animated SVG.
• Designer-made motion, shared across web, iOS and Android: Lottie.
• Photos, screen recordings, anything with real-world footage: video.
• Must paste anywhere, including email and chat: GIF, or animated WebP where supported.

Comparison table

Notes:

• Lottie runtime. lottie-web plays After Effects animations exported as JSON through Bodymovin, rendering with SVG or canvas. The dotLottie format packages animations and assets into a compressed .lottie file. Neither is an <img>-compatible image.
• GIF. MDN notes that GIF stores each pixel as an index into a palette of up to 256 colors, simulating more with dithering, and recommends WebP, AVIF or APNG for animation instead.
• File size depends heavily on content. Treat the table as a tendency, and measure your own asset.

Animated SVG: the lightest option for vector motion

An animated SVG is a single file with no runtime. Inline it or drop it in an <img>:

<!-- Works for CSS or SMIL animation inside the file -->
<img src="/loader.svg" width="48" height="48" alt="Loading" />

CSS and SMIL animations defined inside the SVG can play when it is loaded this way. Scripts and external resources cannot, so an SVG that depends on JavaScript only works inline in the page. For how to write the animation, see how to animate an SVG and the CSS keyframes guide.

Strengths: resolution independence, tiny size for simple shapes, editable in a text editor, styleable with CSS variables, no dependency. Weaknesses: cost grows with the number of animated elements, and complex scenes (hundreds of paths, heavy filters) can drop frames on low-end devices.

Lottie: designer-made motion across platforms

Lottie earns its place when the same animation must ship to web, iOS and Android from one source file made in After Effects. On the web the player takes a few lines:

<div id="hero-anim" style="width:240px;height:240px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
<script>
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  lottie.loadAnimation({
    container: document.getElementById('hero-anim'),
    renderer: 'svg',
    loop: !reduce,
    autoplay: !reduce,
    path: '/animations/hero.json'
  });
</script>

This checks prefers-reduced-motion and disables looping and autoplay for users who asked for less motion. Lottie does not do that for you.

Costs: a player library to download and run, JSON that is not editable as SVG, and an After Effects-based workflow. The lottie-web README also lists what it does not support, including image sequences, video and audio.

GIF: the compatibility fallback

GIF is limited by design: a 256-color palette, one-bit transparency and no inter-frame compression comparable to video. It survives because it works almost everywhere a picture can be pasted. Use it when the destination does not accept SVG or video.

If you start from an animated SVG, SVG Weave can export a GIF (it samples at 15 frames per second for up to 10 seconds) and a PNG alongside the SVG. That is the intended use: SVG on your site, GIF in the places that need it.

Video: when the footage is the content

For screen recordings, product demos and anything photographic, a short looping muted video beats both GIF and SVG on quality and size. The markup for a GIF-like loop:

<video autoplay muted loop playsinline width="640" poster="/demo-poster.webp">
  <source src="/demo.webm" type="video/webm" />
  <source src="/demo.mp4" type="video/mp4" />
</video>

MDN's autoplay guide says muted playback is the generally allowed case, that playsinline is required for autoplay in Safari, and that browsers may still block under other circumstances. Add a poster so something shows if autoplay is blocked.

Weaknesses: raster only, usually opaque background, and no CSS styling of what is inside.

When not to use SVG

Animated SVG is the wrong choice in these cases:

• Photos or photographic textures. SVG is for shapes. Converting a photo to vector gives a stylized approximation, not the picture. Keep photos as video or raster.
• Frame-by-frame or hand-drawn animation. A character with 200 drawn frames is a video or sprite job, not hundreds of SVG layers.
• Very complex scenes. Thousands of animated paths, large blur filters or heavy masks cost CPU on every frame. If it stutters on a mid-range phone, switch to video or Lottie's canvas renderer.
• Email. Many email clients do not play SVG animation, and some do not display SVG at all. Use a GIF or a static image there, and test in the clients you care about.
• Destinations that only accept raster or video. Many social platforms and chat apps expect JPG, PNG, GIF or MP4. Check the target before you build.
• Scripted logic inside an <img>. If the animation needs JavaScript, it cannot run through <img>. Inline it, or use Lottie with a player.
• Cross-platform native motion. If an iOS or Android app must play the same animation as your site, Lottie has first-party native players. Animated SVG has no equivalent.

A related check: an animation that loops forever and attracts the eye can be an accessibility problem. Whatever format you choose, honor prefers-reduced-motion, as shown in the Lottie snippet above.

Where SVG Weave fits

SVG Weave is for the animated-SVG branch of this decision. You give it a prompt, an image or an existing SVG, and it returns an SVG with CSS keyframes, so the result has no runtime and plays in an <img>. Starting from a flat logo PNG, Image to SVG Converter vectorizes it first. Starting from nothing, Text to SVG Generator generates the artwork.

It does not produce Lottie JSON, video, or interactive animation, and generated output needs a preview and sometimes an edit. It is paid and credit-based, with no free tier: packs start at $5 for 150 credits. If a single hand-written CSS animation does the job, that is free.

FAQ

Is animated SVG better than GIF?

For vector artwork on the web, usually yes: it scales without blur, supports full color and partial transparency, and is often smaller. GIF wins only on compatibility, since it works in email and chat apps where SVG animation may not.

Should I use Lottie or animated SVG?

Choose Lottie when a designer authors the motion in After Effects and it must also run in native mobile apps. Choose animated SVG with CSS for web icons, loaders and logos, where you want no runtime and an editable text file.

Is video better than GIF for animation?

For anything with photographic content, yes. MDN recommends modern formats such as WebP, AVIF or APNG over GIF for animation, and a muted looping <video> is another good alternative. Video also compresses motion far better than GIF.

Does an animated SVG work in email?

Not reliably. Many email clients do not render SVG animation, and some do not render SVG at all. Use a GIF or a static fallback for email and test in the clients you target.

Can I convert an animated SVG to a GIF?

Yes. SVG Weave exports a GIF from an animated SVG, sampled at 15 frames per second for up to 10 seconds. The GIF loses scalability and is limited to 256 colors, so keep the SVG for your own site.

Does Lottie output SVG?

Lottie can render to SVG in the browser through the lottie-web player, but the source file is JSON, not an SVG file. You cannot use it as an <img> source or edit it like a normal SVG.