When a design calls for motion on a website or in an app, two vector options usually come up: animated SVG and Lottie. Both scale to any screen without blurring, and for illustration-style motion both are usually much lighter than video or GIF. The difference is in how each one is made, how it plays and who can maintain it.
Animated SVG
SVG is a vector image format that browsers understand natively. You animate it with CSS, with SMIL or with a JavaScript library such as GSAP. It needs no player, each shape can be styled and controlled from code, and it can respond to hover, scroll, clicks and theme colors. That makes it a strong fit for icons, logos, loaders and small interface interactions. Its weak point is complex animation: hand-coding a walking character or a long scene is slow, and most motion designers do not work this way.
Lottie
Lottie is a JSON-based animation format created at Airbnb. Animations are usually designed in Adobe After Effects, exported with the Bodymovin plugin and played by a Lottie player: lottie-web in the browser and native libraries on iOS and Android. Motion designers keep working in their usual tool, and the same file plays on the website and in the mobile apps with its timing and easing intact. The trade-offs are a player library to load, After Effects features that Lottie does not support, and files that grow large when they embed raster images. The dotLottie format compresses and bundles animations to help with size.
How to choose
- Choose SVG for icons, small interface animations and anything that must react to user input or follow theme colors.
- Choose Lottie for longer illustrated sequences, onboarding screens and character animation designed in After Effects.
- Choose Lottie when the same animation must run on the website and in native iOS and Android apps.
- Choose video, such as MP4 or WebM, when the motion includes photos, 3D renders or heavy textures, where vectors stop being efficient.
- Whatever you choose, respect the prefers-reduced-motion setting and test file size and smoothness on a mid-range phone.
Pick the format that matches who builds the animation and how it has to behave.