SVG to Lottie
Already animated, ready to animate, or a sequence of frames? Start with the workflow that fits your SVG.
Choose your starting point
An animated SVG
Upload one SVG with supported SMIL animation to the converter. Set the frame rate, convert, then preview and download Lottie JSON. This file is sent to the server.
A static SVG
Open your SVG in the editor and add Spin, Pulse, Bounce, or slide motion. The SVG stays embedded as one artwork image layer. Animate the whole artwork; individual paths are not independently editable.
A sequence of images
Upload PNG, JPG, WebP, or SVG frames to the converter. Arrange them and choose the frame rate. Each frame becomes an embedded raster image, including SVG frames; this does not turn the sequence into vector shapes.
Try an animated SVG conversion
This small pulse uses two circles with radius, opacity, and fill animation. Convert it using the same server conversion as the main tool, then inspect the result.
240 × 160 · 2 seconds · 30 fps
The preview starts paused. No account needed.
What carries over to Lottie?
The animated-SVG converter translates a specific subset of SVG. Use simple shapes and check your output before using it in a project.
Supported animated SVG features
Paths, rectangles, circles, ellipses, polygons, polylines, and lines with simple fill and stroke colors. On those shapes, SMIL can animate opacity, fill and stroke colors, circle radius and center, or ellipse radii. Translate, scale, and rotate animations are supported; rotation uses the composition center.
Use explicit values or from and to values with a duration. Linear, discrete, and spline timing are supported. Simple set changes work for opacity, fill, visibility, and display. The converter accepts one SVG up to 500 KB and exports up to 30 shape layers.
Features to simplify first
CSS or JavaScript animation, motion paths (animateMotion), path morphing, and animated groups are not translated. Gradients, masks, clipping, filters, text, linked images, and existing SVG transforms are not faithfully converted by this path.
Keep animation on individual shapes. Use absolute shape coordinates and plain fill or stroke attributes. Complex repeats, event-based timing, combined transforms or animated geometry attributes, and rotation pivots may differ from the original SVG. Unsupported features can be omitted without an error, so compare the preview with the source.
When to use the editor
For a static illustration with gradients or grouped artwork, animate the entire SVG in the editor. It preserves the sanitized SVG as an embedded image asset, instead of creating native Lottie shape paths. SMIL animation elements are removed on import, and external image links are stripped. Keep your artwork self-contained.
Choose an export and test the player
The converter downloads Lottie JSON. Open the result in the editor for dotLottie, GIF, WebP frame-sequence ZIP, or sprite-sheet export. Embedded SVG image assets are not supported equally by every Lottie player. Test on your target website, app, or native player; use a rendered export when that player cannot display the artwork correctly.