Open Paraplex

SVG and vectors

A logo or an icon as a picture is stuck at one size and color. Brought in as vectors, it becomes path layers: sharp at any size, with fills, strokes and depth you can change, and outlines you can draw on over time.

An SVG star brought in as a path layer, Path 1, in the Layers panel and on the frame

Bring vectors in

Pick whichever is handiest:

  • Paste from a design app. In Figma, right-click a layer and choose Copy/Paste as › Copy as SVG. In Illustrator, select and copy. Then click the Paraplex canvas and press ⌘ V (Ctrl V).
  • Choose an SVG file. Click Vector (SVG) in the dock and pick the file.
  • Replace an outline. Drop an SVG file onto a path layer that's already there, and it takes the new outline.

Important

Dropping an SVG file on an empty part of the canvas brings it in as a picture, not as vectors. Use Vector (SVG) or paste it instead.

What you get

  • One path layer for each shape in the SVG, named after its id in the file, or Path 1, Path 2 and so on.
  • More than one shape comes in as a group named Vector, centered in the scene.
  • Fill colors, opacity and how holes are cut stay as they were.
  • Strokes become each layer's Stroke, with their width, color, caps and joins, so you can draw a line on over time. See Strokes.
  • Line art with no fill comes in as strokes only.
  • Every path has a little thickness, so it can be given depth like any shape. See Pen and paths.

Things to know

  • Gradient and pattern fills inside the SVG come in as a flat light gray. Give the layer a gradient in Paraplex instead. See Fills and gradients.
  • Text and embedded pictures inside an SVG don't come across. Turn text into outlines in your design app first.
  • Shapes with neither a fill nor a stroke are left out.
  • For whole Figma frames, with their text, pictures and layout, use the Figma plugin instead.