Animated SVG & Lottie Player

Preview and validate your animated SVG or Lottie JSON files right in the browser. Play, pause, adjust speed, and check for errors before using them in your projects.

Animated SVG & Lottie Player Validator

Validate SVG animations and Lottie JSON files for compatibility and errors

Validation Type

SVG Code

About Validation

This validator checks SVG files for proper syntax, required attributes, and potential compatibility issues. For Lottie files, it validates the JSON structure and required BodyMovin properties.

How the Animated SVG/Lottie Validator Works

This tool checks your Lottie JSON or animated SVG files for common issues that cause playback problems. It validates structure, checks for unsupported features, and reports errors that might break animations in your app.

Lottie files are JSON-based animations exported from After Effects via the Bodymovin plugin. The validator parses your JSON, checks required properties (v, fr, ip, fp, layers), and flags potential issues like missing assets, invalid keyframes, or properties that won't render on all platforms.

What gets validated:

JSON structure - required Lottie properties present
Version compatibility - bodymovin version checks
Layer structure - null layers, shape layers, solids
Keyframe data - valid timing, interpolation types
Asset references - images, precomps, fonts linked correctly
Expression usage - flagged (not supported in all players)
File size warnings - large animations may cause performance issues

For animated SVGs, the tool checks for SMIL animation elements (<animate>, <animateTransform>), CSS animations, and JavaScript-based animations. It reports browser compatibility notes since SMIL is deprecated in some browsers.

When You'd Actually Use This

Before deploying Lottie animations

Your designer exported a Lottie file but it's not playing in production. Run it through the validator first - it might have expressions that the web player doesn't support, or missing image assets.

Debugging broken animations

An animation works in After Effects preview but fails in your React app. The validator shows what features are used - maybe it relies on effects that don't translate to Lottie format.

Checking Lottie files from third parties

Downloaded a free Lottie animation from a marketplace? Validate it before using. Some files use features that only work in specific players or have bloated file sizes.

Optimizing animation performance

The validator reports file size and layer count. Animations with 100+ layers or 500KB+ JSON may cause jank on mobile. Use the report to identify optimization opportunities.

Verifying SVG animation compatibility

Created an animated SVG with SMIL? The validator checks if you're using deprecated elements. Modern browsers still support SMIL but Safari has limitations - you might need CSS or JS alternatives.

QA for design handoffs

Designers hand off Lottie files as part of a sprint. Run validation as part of your acceptance checklist - catch issues before they reach development.

What to Know Before Using

Lottie version matters.Different Lottie players support different bodymovin versions. The validator flags version mismatches - if your file uses v5.7+ features but you're using lottie-web 5.5, expect issues.

Expressions aren't universally supported.After Effects expressions (like wiggle(2, 10)) work in After Effects but many Lottie players can't execute them. The validator flags expression usage so you know to bake animations into keyframes.

Image assets need separate handling.If your Lottie references external images, the validator shows the asset paths. You'll need to host these images separately or use base64-encoded assets in the JSON.

SMIL animation is deprecated.SVG SMIL animations (<animate> elements) work in most browsers but aren't part of SVG 2.0. For critical animations, consider CSS animations or JavaScript libraries like GSAP.

Pro tip: If the validator reports "expressions detected," ask your designer to pre-compose or bake the animation. Expressions add runtime complexity and often fail in mobile Lottie players.

Common Questions

What's the difference between Lottie and animated SVG?

Lottie is JSON-based, exported from After Effects, and requires the lottie-web/player library. Animated SVG is native XML with SMIL, CSS, or JS animations. Lottie offers more complex animations; SVG has better browser support without dependencies.

Why does my Lottie file show "unsupported features"?

After Effects has effects and layer styles that don't translate to Lottie format. Things like drop shadows, blurs, and certain blending modes may not render. The validator lists unsupported features so you can redesign around them.

How do I fix "missing assets" errors?

If your Lottie references external images, ensure the image files exist at the specified paths. For web use, either host images at those paths or re-export with "Embed assets" enabled to base64-encode them in the JSON.

Can this validate Lottie files for iOS/Android?

The validator checks general Lottie compatibility. However, mobile Lottie libraries (lottie-ios, lottie-android) have their own limitations. Test on target platforms - some features work on web but not mobile.

What's a reasonable Lottie file size?

Aim for under 100KB for simple icons, under 300KB for complex animations. Files over 500KB may cause noticeable load delays on mobile. If your file is large, consider simplifying shapes or splitting into multiple animations.

Does this tool play/preview animations?

This is a validator, not a player. It checks file structure and reports issues. For preview, use the LottieFiles previewer or drop your file into a test page with lottie-web.

Can I validate SVG files with CSS animations?

The validator checks for <style> blocks with @keyframes and animated properties. It reports which properties are animated but doesn't verify CSS syntax - use a CSS validator for that.

Other Free Tools

Search tools

Animated SVG & Lottie Player