Free · Paste straight from Figma · No signup · No upload

Convert SVG to Lottie

An SVG is a static vector drawing and a Lottie is vector animation data, so converting means importing the SVG's paths as real shape layers and then giving them motion. Paste an SVG into Lotiqlab — straight out of Figma, Illustrator, or a code editor — and each path, fill, stroke, and group becomes an editable layer on the canvas. Add keyframes on the timeline, then export as Lottie JSON or dotLottie. It all runs in your browser, so nothing is uploaded.

How it works

  1. Copy your SVG (Cmd+C in Figma or Illustrator, or copy the raw <svg> markup) and paste it onto the Lotiqlab canvas — or drop the .svg file in.
  2. The paths land as editable shape layers with their fills, strokes, and groups intact. Rename and reorder them in the layer list.
  3. Move the playhead on the timeline and animate position, scale, rotation, opacity, colour, or trim paths to give the artwork motion.
  4. Export as Lottie JSON or dotLottie for the web and apps, or straight to GIF, MP4, or WebM.

By the numbers

Paste to import
Copy an SVG in Figma or Illustrator and press Cmd+V on the canvas — the paths arrive as editable shape layers, not a flat image
Real shape layers
Fills, strokes, gradients, and groups are preserved, so you can recolour and animate each one independently
0 uploads
Parsing and conversion run in your browser — the artwork never touches a server

Frequently asked questions

How do I convert an SVG to a Lottie file?

Paste or drop the SVG into Lotiqlab. It parses the markup into Lottie shape layers on the canvas, where you can animate them on the timeline and export as .json or .lottie. There is no upload step and no conversion queue.

Does the converted Lottie animate automatically?

No, and no honest converter can do that — an SVG contains no timing information, so there is nothing to convert into motion. Lotiqlab gives you the artwork as editable layers plus a timeline, so you decide what moves. If you want a starting point generated for you, describe the motion in AI mode instead.

Which SVG features survive the conversion?

Paths, rectangles, ellipses, polygons, groups, solid fills, strokes, and linear or radial gradients map onto their Lottie equivalents. Filters, blend modes, embedded fonts, and CSS animations inside the SVG do not have direct Lottie equivalents and are dropped or approximated — check the result on the canvas.

Can I convert an animated SVG (SMIL or CSS) to Lottie?

The artwork imports, but the SMIL or CSS animation does not carry across, since Lottie stores keyframes in its own format. Re-create the motion on the timeline, which usually takes a minute or two and gives you cleaner output.

Is my SVG uploaded anywhere?

No. Lotiqlab is 100% client-side, so the SVG is parsed and converted in your browser and never leaves your machine.