Import an SVG and animate its points
Bring in vector artwork as editable, animatable paths.
Bring an existing SVG drawing in as editable, animatable shapes.
Import
- Open the Canvas studio (P).
- Click Import SVG and pick a file.
The importer parses <path>, <rect>, <circle>, <ellipse>, <polygon>, and <polyline> elements, fits the whole drawing into the scene, and flips SVG's y-down coordinates into the scene's y-up. Original fill and stroke colors are preserved (inherited from parent groups if not set directly on the element). Every element's own transform attribute — and every ancestor <g>'s — is composed into one matrix and applied before fitting, so translate/rotate/scale/skew/matrix transforms in the source file carry over correctly. Each shape becomes its own path object, and every anchor point on it is individually keyframeable — the same as a shape drawn by hand with the pen tool.
SVG arcs (the A path command) convert to real cubic Bézier curves — the same endpoint-to-center parameterization every SVG-to-Bézier converter uses — so arc-heavy icon sets (rounded rectangles built from arcs, pie/donut icons, circular badges) keep their true curvature after import rather than faceting into straight-line segments.
A/a) commands chained one after another under a single shared command letter — a shorthand some export tools emit, e.g. a2,2 0 0,1 2,2 2,2 0 0,1 -2,2 — can misparse the large-arc/sweep flags on the second and later arcs in the chain. A single arc command per letter (the far more common case, including everything Illustrator/Figma/Inkscape typically emit) always parses correctly. If an imported arc looks wrong, re-export with each arc on its own explicit A/a, or redraw that segment with the pen tool.Clean up a heavy import
Complex SVGs (traced logos, detailed icons) often import with far more anchor points than you need. Right after importing, select the shape and click Simplify — it removes points that barely change the silhouette, which makes the shape much easier to hand-edit and animates more smoothly with fewer intermediate anchors to interpolate.
Animate it
- Select a point and drag it directly — with record mode on, that drag becomes a keyframe on that anchor's
nodes.N.x/nodes.N.y. - Or apply a point animation preset to animate every point in the shape at once:
| Preset | Effect |
|---|---|
| Wave | Each point bobs up and back, staggered along the path |
| Ripple | A shockwave from the center outward |
| Assemble | Points fly out from the center to build the shape |
| Scatter in | Points fly in from random directions |
| Spiral in | Points arrive along an arc around the center |
| Fall in | Points drop in from above like a curtain |
| Unfold | The path grows out of its first point |
Tune Dur (seconds each point animates for), Lag (stagger between consecutive points), and Amp (movement size) before applying — the preset bakes staggered per-point property events using those settings.