Lizier tools

📖 How to Use

Prepare Your SVG File

Illustrator: File → Export As → SVG. Figma: right-click → Copy as SVG, paste in the code box. Inkscape: File → Save As → SVG.

💡 SVG from AI tools works too

Upload or Paste Your SVG

Click Upload SVG, or use paste code to paste SVG code. Preview loads automatically.

👁 Mobile: pinch to zoom, drag to pan

Set Size & Pick Layers

Pick your video size (1:1 for posts, 9:16 for stories). Check which layers to include. Groups follow your SVG structure automatically.

🔷 Simple shapes = lighter file in Alight Motion

Convert & Import into Alight Motion

Hit CONVERT TO XML, then download. In Alight Motion: tap + → Import → pick the XML file.

📋 File name is auto-filled from your SVG

SVG Preview

🖼

Preview will appear here

fit

Layer List

Layers will appear after you load an SVG

Project Settings

Video Size

Custom Size

Lebar

Tinggi

Fill

Grouping

Stroke

Add Stroke

Shape Detection (beta)

Output File Name

e.g. MyImage(24fps)_1x1_2s.xml

FPS & Duration

FPS

Duration (seconds)

60 frame · endTime = 2040ms

output.xml

—

// XML output will appear here after converting...

What It Can Do

Available Features

Warna Penuh CSS

hex, rgb/rgba, hsl/hsla, named colors, fill-opacity, dan CSS class dari <style> block.

CORE

Grup Berlapis (Nested)

Grup <g> dalam <g> diconvert jadi EmbedScene bersarang di AM — kedalaman tak terbatas.

v20 NEW

Shape Detection AM

Kotak, lingkaran, rounded rect, segitiga, poligon → primitif native AM.

v10+

Auto Center Artwork

SVG yang tidak centered di viewBox otomatis digeser ke tengah canvas AM.

v12+

Matrix Transform Export

Matrix dari semua parent <g> diakumulasi otomatis — cocok untuk SVG Illustrator.

CORE

Arc ke Bezier Akurat

Command A dikonversi via SVG spec §B.2.3 — lingkaran tidak distorsi.

v10+

Stroke Custom

Stroke size, join, color, plus gradient linear/radial/sweep.

v5+

Preview Pan & Zoom

Drag geser, scroll/pinch zoom, auto-fit di tengah. Layer list nested dengan toggle collapse.

CORE

Warna Penuh CSS

hex, rgb/rgba, hsl/hsla, named colors, fill-opacity, dan CSS class dari <style> block.

CORE

Grup Berlapis (Nested)

Grup <g> dalam <g> diconvert jadi EmbedScene bersarang di AM — kedalaman tak terbatas.

v20 NEW

Shape Detection AM

Kotak, lingkaran, rounded rect, segitiga, poligon → primitif native AM.

v10+

Auto Center Artwork

SVG yang tidak centered di viewBox otomatis digeser ke tengah canvas AM.

v12+

Matrix Transform Export

Matrix dari semua parent <g> diakumulasi otomatis — cocok untuk SVG Illustrator.

CORE

Arc ke Bezier Akurat

Command A dikonversi via SVG spec §B.2.3 — lingkaran tidak distorsi.

v10+

Stroke Custom

Stroke size, join, color, plus gradient linear/radial/sweep.

v5+

Preview Pan & Zoom

Drag geser, scroll/pinch zoom, auto-fit di tengah. Layer list nested dengan toggle collapse.

CORE

Warna Penuh CSS

hex, rgb/rgba, hsl/hsla, named colors, fill-opacity, dan CSS class dari <style> block.

CORE

Grup Berlapis (Nested)

Grup <g> dalam <g> diconvert jadi EmbedScene bersarang di AM — kedalaman tak terbatas.

v20 NEW

Shape Detection AM

Kotak, lingkaran, rounded rect, segitiga, poligon → primitif native AM.

v10+

Auto Center Artwork

SVG yang tidak centered di viewBox otomatis digeser ke tengah canvas AM.

v12+

Matrix Transform Export

Matrix dari semua parent <g> diakumulasi otomatis — cocok untuk SVG Illustrator.

CORE

Arc ke Bezier Akurat

Command A dikonversi via SVG spec §B.2.3 — lingkaran tidak distorsi.

v10+

Stroke Custom

Stroke size, join, color, plus gradient linear/radial/sweep.

v5+

Preview Pan & Zoom

Drag geser, scroll/pinch zoom, auto-fit di tengah. Layer list nested dengan toggle collapse.

CORE

FAQ

Common Questions

Why does it look different from the original SVG?+

Blur, shadows, and masks can't be converted. Curves are handled accurately since v10.

Why is everything black after converting?+

The <style> tag wasn't copied with the SVG. Make sure to copy the full SVG code including <style>.

How does Group support work (v20)?+

Groups inside your SVG are kept as-is in Alight Motion. If Group A contains Group B, it stays that way after converting.

Can I upload an .ai file directly?+

No. Export it first: File → Export As → SVG, then upload the .svg.

Is my data safe?+

Yes. Everything runs in your browser — nothing is sent to any server.

What size should I use?+

1:1 for posts, 9:16 for stories/reels. Default 1080×1080 works for most cases.

Turn Any SVGInto an Alight Motion Preset

Turn Any SVG
Into an Alight Motion Preset