Skip to content
svg-engine

Tutorials

Hands-on walkthroughs that combine the tools and concepts. Each one has an interactive playground below the steps — try it right on the page, or in the full live demo.

1. Draw your first shape

Section titled “1. Draw your first shape”
  1. Press R (or click the Rectangle in the tools palette).
  2. Drag on the canvas to draw a rectangle. Hold Shift for a square, or Alt to draw from the center.
  3. Press V to switch to Select, then click your shape.
  4. In the Inspector, set a fill color. Done — your first object.
Open in a new tab ↗

Loading the interactive tutorial…

2. Make it a rounded rectangle

Section titled “2. Make it a rounded rectangle”
  1. Press R again.
  2. In the Tool Options bar, raise Corner radius.
  3. Drag a new rectangle — the corners are rounded.
Open in a new tab ↗

Loading the interactive tutorial…

3. Edit a path’s points

Section titled “3. Edit a path’s points”
  1. Draw a shape, select it, and convert it to a path.
  2. Press A for Direct Select — the anchor points appear.
  3. Drag an anchor to move it; double-click an anchor to cycle its type (cusp ↔ smooth ↔ symmetric); double-click a segment to add a point.
Open in a new tab ↗

Loading the interactive tutorial…

4. Combine two shapes

Section titled “4. Combine two shapes”
  1. Draw two overlapping shapes.
  2. Press V and Shift-click both to select them.
  3. Apply a Pathfinder operation — try Union to merge them, or Subtract to cut one from the other.
Open in a new tab ↗

Loading the interactive tutorial…

5. Draw a freehand stroke and clean it up

Section titled “5. Draw a freehand stroke and clean it up”
  1. Press P for the Pencil and draw a freehand line.
  2. Press S for Smooth and apply it to simplify the line.
  3. Switch to Direct Select (A) for any final tweaks.
Open in a new tab ↗

Loading the interactive tutorial…