SVG import
SVG is the format to bring vector artwork in with. Once imported, an SVG stops being special — it is ordinary shape layers with ordinary keyframe tracks.
What happens on import
| Source | Result |
|---|---|
| Static SVG | Editable vector shapes as scene layers |
Animated SVG — SMIL <animate> or CSS @keyframes | The same shapes, plus real keyframe tracks reproducing the animation |
Both SMIL and CSS animation are understood. The importer samples the animated transform over time and diffs it against the static one, then writes a small set of keyframes that reproduce the motion — rather than embedding a black box that plays itself.
The Assets grid thumbnail proves nothing. Thumbnails render the raw file
in an <img>, and the browser’s own SVG engine plays SMIL and CSS animation
there for free. A thumbnail that animates does not mean the importer
understood the file — adding it to the scene is the real test.
After import
The layers are yours. Press U on one to see what the importer wrote:
- A spinning loader typically becomes two rotation keyframes plus a looping expression.
- A line that draws itself becomes a trim-path track — the same machinery as Trim Paths.
From there, retime the keyframes, re-ease them, delete the ones you do not want, or replace the expression with your own. Nothing is locked.
Things worth knowing
- Bulk write. All the tracks are written in one batch with a single change notification, which is why a complex SVG imports instantly rather than stuttering through hundreds of individual writes.
- Groups. Grouped SVG elements arrive grouped, so a multi-part illustration keeps its structure.
- Import, then rig. If you want to deform imported artwork, use Rig Logo for Animation — the rigging tools need a single riggable leaf, and an imported SVG is usually a group.
Preparing an SVG for import
- Flatten transforms you do not need. Deep nesting of transforms produces deeper layer hierarchies.
- Name your groups. Names come through, and a named layer tree is much
easier to animate than
path-14. - Convert text to outlines unless you want live type. Live text is better if you plan to use text animators; outlines are better if the exact letterforms matter.
- Remove the animation if you plan to rebuild it. An imported animation is easy to delete, but it is easier not to import it in the first place.
Related
- Lottie — the other vector-animation format
- Importing media
- Shape operators