Lottie vs GIF vs SVGA vs MP4: Which Format for Gift Animations?

Choosing between Lottie, GIF, SVGA and MP4 comes down to content. Lottie is built for vector animations exported from After Effects. GIF plays everywhere but has no sound or partial transparency. SVGA is built for bitmap-rich gift animations with optional sound in live-streaming apps. MP4 adds sound, but standard H.264 video has no transparency.

How do SVGA, Lottie, GIF and MP4 compare at a glance?

	SVGA	Lottie	GIF	MP4 (H.264)
What the file stores	Images, vector shapes and per-frame positions in one file (2.x: zlib-compressed Protobuf)	Animation data in JSON; images are possible but the docs advise vector shapes	A sequence of indexed-colour frames	Compressed video frames, plus optional audio tracks
Colours	PNG images (PNG-8 or PNG-24 per the 1.x spec)	Full-colour vectors and images	Up to 256 colours per colour table	Full-colour video
Transparency	Yes	Yes	One transparent colour only (on/off)	None in standard H.264 video
Sound	Yes, in 2.x files (player support varies)	Not in Lottie's supported-features list	No	Yes
How it's made	After Effects or Animate with the SVGA converters	After Effects with the Bodymovin plugin	Exported from most image and video tools	Exported from any video editor
What plays it	SVGAPlayer libraries (Android, iOS, Flutter, Web, Web-Lite)	Lottie libraries (official: Android, iOS, Web)	Browsers and most image views	Native video players and browsers
Change parts at runtime	Replace an image, add text or hide an element	Dynamic properties (colours, transforms, text and more)	No	No
Official player status	Android, iOS, Flutter and Web repos archived; SVGAPlayer-Web-Lite still updated	Actively maintained	Built into platforms	Built into platforms

What is the difference between SVGA and Lottie?

Both formats let a designer animate in Adobe After Effects and ship a file that a small library plays inside an app, instead of shipping video. The difference is what they are optimised for.

Lottie describes animation as JSON that mirrors After Effects layers, shapes and keyframes, exported with the Bodymovin plugin. Its official documentation says Lottie "is designed to work with vector shapes". It supports images, but warns that image-based files are an order of magnitude larger than equivalent vector animations, get pixelated when scaled, and add separate image files. Feature support also varies by platform: for example, After Effects expressions work in Lottie's web players but not on Android or iOS.

SVGA describes animation as a set of bitmap images (and optional vector shapes) moved frame by frame. The format was designed around images, so the glossy, detailed artwork common in live-stream gifts (gold, gems, flames, sparkles, photo-like cars) is its normal case rather than a warning. SVGA 2.x can also carry audio clips tied to frames, which Lottie's supported-features list doesn't include.

Two practical differences matter for planning:

1. Maintenance. Lottie's Android, iOS and web repositories are actively maintained. The official SVGAPlayer repositories for Android, iOS, Web and Flutter are archived on GitHub: the code still works and can be forked, but you maintain any fixes yourself. SVGAPlayer-Web-Lite is still updated, and the SVGA docs list every player.
2. Version support. SVGA has two file versions (1.x ZIP + JSON, 2.x Protobuf). Android and iOS players read both; the Flutter package reads 2.x only. See What Is an SVGA File? for details.

Lottie vs GIF: which performs better?

Lottie vs GIF performance depends on the animation, so measure rather than assume. The two work in opposite ways:

• GIF stores every frame as a finished, LZW-compressed bitmap (GIF89a). Playback is mostly decoding, but file size and memory grow with resolution and frame count, and colour is limited to 256 per table.
• Lottie stores shapes and keyframes, then draws each frame at runtime. That keeps vector files small and sharp at any size, but complex files cost CPU or GPU time on every frame. Lottie's Android docs say masks and mattes have the largest performance hit, and that hardware acceleration is off by default and can help or hurt depending on the animation.

For simple vector motion, Lottie stays sharp at any size and its file doesn't grow with display resolution. For short, tiny clips where any platform must play it with no library, GIF is the easier choice. Profile both on your slowest target device.

How do GIF and MP4 compare with SVGA?

GIF is the most universally supported option: browsers and most image views animate it with no extra library. The trade-offs come from the GIF89a specification itself. Each colour table holds at most 256 colours, and transparency is a single "transparent colour" index, so a pixel is either fully visible or fully invisible. Soft glows and shadows over a live video therefore get hard, jagged edges. GIF has no audio.

MP4 is a video container, usually with H.264 video and optional audio. It plays in native video players on every platform, handles photo-real footage well and can carry sound. Standard H.264 video has no alpha channel, so an MP4 gift would cover the stream with a solid background unless you use a workaround, such as a transparent-MP4 player that stores the alpha channel beside the colour in each frame (for example the open-source YYEVA). Apple platforms support HEVC video with alpha, but that isn't a cross-platform option.

SVGA sits between them for this use case: full-colour images with real transparency, optional sound, and playback inside your own view, at the cost of adding an SVGA player library to the app.

What about VAP and other transparent MP4 formats?

VAP, from Tencent, is a transparent-MP4 format. It stores alpha values in an extra area of each video frame and plays with hardware video decoding on Android, iOS and the web. Tencent's VAP repository says it is no longer maintained. For a full comparison, including YYEVA, see SVGA vs VAP.

When should you choose SVGA animations?

Choose SVGA when:

• The animation is an overlay: a gift, entry (entrance) effect or avatar frame that must show the live video or profile picture underneath, with soft transparent edges.
• The artwork is detailed and image-based, such as metallic cars, jewellery or fire.
• You want sound with the animation in a single file (on Android and iOS).
• You need to personalise an element at runtime, for example replacing a placeholder image with the sender's avatar or adding their name as text. SVGAPlayer supports this when the file has a named element for it.
• Your app or your designers already work with SVGA. Ready-made files are available: see SVGA Gifts such as Golden Champagne Celebration or Electric Blue Dragon.

When is Lottie the better choice?

Choose Lottie when the animation is mostly flat or vector art (icons, loaders, onboarding illustrations, UI micro-interactions) and you want an actively maintained library with official players for Android, iOS and the web. Lottie's dynamic properties also make it easy to recolour or retime vector layers in code. If your gift artwork is mostly vector and you don't need sound, Lottie is a reasonable option; check the supported-features table for the effects you use.

When do GIF or MP4 still make sense?

• GIF works for small stickers or reactions where universal support matters more than colour depth or soft edges, and where no sound is needed.
• MP4 suits full-screen moments that don't need to show the stream underneath, or previews outside the app. SVGa Marketplace itself uses MP4 videos as the previews on product pages, because every browser can play them, while the files you buy are SVGA, WebP, PNG or GIF.

Which format gives the smallest file?

There is no general answer, so be wary of anyone who quotes a fixed ratio. File size depends on the artwork, resolution, frame count, frame rate and audio, and every format behaves differently with each. Lottie's own docs note that adding images makes its files much larger; an image-heavy SVGA file is larger than a simple one. For reference, three SVGA 2.x sample gifts on our site are 133 KB (3.3 s), 516 KB (6.5 s) and 643 KB (8.0 s); each product page shows the exact file size. The reliable method is to export the same animation in the formats you're considering and compare size, look and CPU use on your target devices.

How can you test a format before you commit?

1. Download one of the free sample gifts from our SVGA Player and drop it into the player to see it play in your browser (the online player plays SVGA 2.x files only).
2. Add the same file to a test build using SVGAPlayer. Our guide How to Add SVGA Gifts to Android, iOS, Flutter and Web Apps has the setup code.
3. Play it over a live video background to check edges, timing and sound.
4. Compare it with a Lottie, GIF or MP4 version of similar artwork if you have one.

If SVGA fits, the full catalog is in SVGA Gifts, SVGA Entry Effects and Avatar Frames, with discounted bundles in Packages.

Sources: SVGA docs (github.com/svga/docs); SVGA format specification (github.com/svga/SVGA-Format); SVGAPlayer-Web-Lite (github.com/svga/SVGAPlayer-Web-Lite); Lottie documentation, supported features and Android performance notes (airbnb.io/lottie); GIF89a specification (w3.org); Apple, "HEVC Video with Alpha" (WWDC19); YYEVA transparent MP4 (github.com/yylive/YYEVA).