An SVG, ready to move as a Lottie.
Turn an SVG into a Lottie in your browser, nothing uploaded: it opens as shapes you can move, you give them keys, and it is saved as a checked Lottie JSON.
By Suraj Kumar4 min read
A logo or an icon is often an SVG already. To make it move in an app, developers ask for a Lottie. KeepSimp's SVG to Lottie page opens the SVG as shapes in the Animation maker, lets you give them keys, and saves a Lottie JSON, all in your browser.
Open the SVG as shapes.
Drop an SVG. Its groups, shapes, paths, gradients and simple styles come in as the editor's own groups and shapes, each one you can move, turn, resize and recolour.
Filters, masks, clip paths, patterns, markers and SVG animation are left out, and the page counts what was left out, so you can see what to draw again.
Give it keys.
An SVG is still, so it comes in still. To make it move, set keys on the timeline: a position, a turn, a size, an opacity or a colour at one moment and another at a later one, with easing between them.
Save it as a Lottie.
Export is already set to a Lottie JSON. It is checked against the Lottie schema and played back by ThorVG before it is offered, and any words are written as their letters' outlines, since Lottie 1.0 has no text.
To keep it as an SVG that moves by itself in a browser, save an animated SVG instead.
Further reading
Topics: svg to lottie · convert svg to lottie · svg to lottie json · animate svg · svg to json animation
A little less theory. A little more doing.
Try it on your own terms, with a free browser tool.
Try the tool