Importing SVG

Bringing vector artwork in from Illustrator, Affinity Designer, Inkscape or Figma as editable Shape layers, and the SVG features that do not survive.

An SVG becomes real geometry here: paths turn into Shape layers with anchors and handles you can edit with the Node tool, not a picture of a drawing. Groups in the file become groups in the Layers panel.

There are four ways in, and they all run the same reader:

• File ▸ Import ▸ SVG… imports into the project you have open
• File ▸ Open… with an SVG selected builds a new untitled project around it
• Dropping the file on the canvas imports it; dropping it elsewhere opens it as a new project
• Ctrl+V pastes SVG markup copied from another application

Imported from a file, the wrapper group takes the file's name. Pasted from the clipboard, it is called SVG.

What becomes what#

Every path command is understood, including elliptical arcs, and all of it is converted to cubic Béziers. A compound path (a letter O, a donut, anything with a hole) stays one Shape layer with its inner contours intact, so the hole still works and the whole thing stays editable as one object.

Fills, fill rule, strokes, stroke width, caps and joins, opacity and gradients all come across, and stroke width is scaled along with the artwork so line weight looks right. Anything marked as hidden in the file arrives hidden.

Colours are read in every CSS form the drawing model uses: named colours, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() and rgba(), with percentages accepted in the numeric forms. The four- and eight-digit hex forms carry their alpha through.

A rounded rect with rx different from ry imports with genuinely elliptical corners. When rx and ry match, it stays a plain rectangle carrying a corner radius instead, so the Node tool's corner-radius handle still works on it.

A linked <image> is resolved relative to the SVG's own folder, so artwork that references a sibling file loads. An embedded data: URI is decoded directly.

Groups carry no transform#

Transforms in the file are baked into the artwork itself, so the groups you get are pure structure with no rotation or scale of their own. The drawing lands exactly where the file says it should, and you are free to rotate or scale the group afterwards without anything shifting underneath.

What is not supported#

The reader covers the drawing model, not the whole SVG specification. All of the following is skipped without a message.

• CSS style blocks and class attributes: see the warning below
• use and symbol: sprite sheets and repeated instances import empty
• clipPath and mask: clipping is not applied, so artwork that was clipped away can appear
• pattern fills, which fall back to flat grey
• filter effects: blurs, drop shadows and the rest
• marker: arrowheads and line ends
• stroke-dasharray and stroke-dashoffset, so dashed strokes import solid
• switch, foreignObject, and SMIL animation
• Text: font, size and position are lost and only a named placeholder layer remains
• Percentage and relative units, and transforms written inside a style attribute

Preparing a file that imports cleanly#

1. Convert text to outlines before exporting; text arrives as a placeholder only.
2. Expand strokes, dashes, patterns and any filter effect you want to keep.
3. Release clipping masks, or crop the artwork to what should be visible.
4. Expand symbols and repeated instances so nothing relies on use.
5. Export with presentation attributes rather than CSS, and give the document a viewBox.

Size and placement#

Document width and height are read in pixels, points, picas, inches, millimetres or centimetres, and combined with the viewBox to scale the drawing sensibly. A file sized in percentages (the usual "width=100%" web logo) is imported at its viewBox size instead of being stretched. The artwork is then centred on your canvas.