Opening and importing SVG

Bring in artwork made elsewhere: an SVG file becomes editable layers, with its groups, names, shapes, gradients and text. Add it to the project you have, or open it as a new one.

Step by step

1. Drop an SVG on the canvas

   Drag an .svg file from your computer onto the canvas. Its artwork comes in as layers, in a group named after the file, centred where you let go. The project's canvas and settings stay as they were.

2. Find its layers

   In the Layers panel the new group is open. Its layers keep the SVG's names (its ids, Inkscape labels or the names an animation tool gave them; the others are named by kind, like Rectangle 1). Click one: shapes stay shapes, with their fill and stroke, to edit as if you had drawn them.

3. Play its animation

   An SVG animated with CSS, or exported with a JS player from a supported SVG animation tool, keeps its animation as ordinary keyframes: the moon's glow has an Opacity track. Press Space to play it.

4. Open Import files

   Click ☰ at the top left, then Import files… (Ctrl I). The Import window takes SVG and image files: click Choose files, or drop them on it.

5. Paste SVG markup

   Or paste SVG markup into its box (from Figma: Copy as SVG) and click Import. It comes in like a dropped file, in a group named Imported SVG, in the middle of the canvas. With SVG markup copied, Ctrl V on the canvas does the same.

6. Open an SVG as a project

   Open… (Ctrl O) in the ☰ menu opens an .svg as a new project instead: its viewBox becomes the canvas and its title the project's name. An animated file from a supported animation tool also brings its length, repeat, direction, speed and start trigger. Save makes it a .SVGcinema file.

Keys