SVG import
SVG is the format to bring vector artwork in with. A static SVG arrives as one layer that draws the file faithfully; when you want the geometry, you convert it into ordinary shape layers with ordinary keyframe tracks.
What happens on import
| Source | Result |
|---|---|
| Static SVG | One SVG layer, kept intact and drawn faithfully — gradients, masks, filters, clip paths and patterns included. Convert it to editable shapes when you want per-path control |
Animated SVG, simple — SMIL <animate> or CSS @keyframes | Editable shapes, plus real keyframe tracks reproducing the animation |
| Animated SVG, complex — gradients, masks or filters that a conversion would flatten | Kept as an SVG layer and played back as a Live SVG, so the picture stays faithful; convert it if you need keyframes |
To turn an SVG layer into editable shapes, right-click it and choose Convert to Editable Shapes… — see Shapes & masks from text and SVG. Revert to Original SVG puts the single layer back.
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>, where an SVG engine plays SMIL and CSS animation for free. A thumbnail that animates does not mean the importer
understood the file — adding it to the scene is the real test.
After conversion
Once the SVG is shapes, 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