Vector guide

1. Getting started

The gallery shows your documents, newest first. + New picks a size (Instagram post, Story, Logo, Icon, A4, Letter, Web page, Phone, YouTube thumbnail, Presentation, Business card, Poster) or your own width and height in pixels. Open opens an SVG file or a picture as a new document; you can also drop a file on the gallery. A document's ⋯ has Open, Rename, Duplicate, Download SVG and Delete.

Every change is kept in this browser as you work (the small dot beside the name turns green when it is). The ‹ at the top left goes back to the gallery.

2. The editor

• Top bar: the document's name (click it to rename), the menus File, Edit, Object, Select, Effect and View, then undo, redo, the zoom (click it for Fit and set sizes) and Download.
• Tool bar on the left. A small corner mark means the button holds more tools: hold it (or right-click it) to pick another; the button then shows the one you picked. Under the tools are the fill and stroke chips (see Fill, stroke and colour).
• Rulers along the top and left (View › Rulers, Ctrl+R). Drag out of a ruler to make a guide.
• Panel on the right with three tabs: Properties (what can be changed about what is picked, or the document and the tool when nothing is), Layers and Swatches.
• A short tip at the bottom of the drawing says what the tool does. Tab hides the tool bar and panel for more room.
• Moving round: a trackpad or wheel scrolls; Ctrl+wheel (or a pinch) zooms where the pointer is; hold Space and drag, or use the Hand (H). The Zoom tool (Z) zooms in on a click, out with Alt, and to a box you drag. Ctrl+0 fits the artboard, Ctrl+1 is actual size.
• Outline view (View › Outline view, Ctrl+Y) shows every path as a thin line without its paint, to find and pick hidden or tiny things.

3. Picking, moving and turning

The Selection tool (V, the black arrow) picks whole things: a click picks, Shift+click adds or takes away, and dragging on empty space picks everything the box touches. A press on a group picks the whole group; double-click it to work inside it (see Working inside a group), or double-click a path to edit its points.

• Move: drag what is picked. Shift keeps it level or at 45°; Alt leaves the original and moves a copy. The arrow keys nudge it 1 px (Shift: 10 px).
• Resize: drag a handle on the box. Shift keeps its shape, Alt resizes round the middle. Pictures keep their shape unless you hold Shift.
• Turn: with a mouse, drag just outside a corner of the box (the pointer changes); on a touch screen, drag the round handle above it. Shift turns in 45° steps.
• Transform again (Ctrl+D) repeats the last move, resize or turn; after an Alt-drag copy it makes another copy the same distance on, which is a quick way to make a row of things.
• The Properties tab's Transform section types an exact X, Y, W and H (the chain keeps the shape when typing W or H), turns by a number of degrees, and flips across or down. Scale strokes and effects makes stroke widths, shadows and blurs grow and shrink with the shape.
• Object › Move…, Rotate…, Reflect…, Scale… do the same by numbers, with Make a copy. Transform each… changes every picked thing round its own middle (with Random for a scattered look).
• The Rotate (R) and Reflect (O) tools turn or mirror round a centre you choose: drag the centre mark to move it, drag elsewhere to turn; Alt+click sets the centre and asks for the angle.
• The Scale (S) and Shear tools (one button, with Reshape) work the same way round their centre: Scale resizes as you drag away from or towards it (Shift keeps the shape; Alt+click to type the size); Shear slants: drag sideways to slant across, up or down to slant down (Alt+click to type the angle).
• Select menu: All (Ctrl+A), Nothing (Ctrl+Shift+A), Everything else, and Same fill colour, stroke colour, stroke width, opacity, appearance (every fill, stroke and effect), font, kind of object, blending mode or fill and stroke as the first picked. Next object above / below (Ctrl+Alt+] / [) picks the thing just above or below the picked one. Save selection… keeps what is picked under a name; it then shows at the bottom of the Select menu, to pick the same things again (kept with the document).

4. Pen, Curvature, Pencil and Shaper

Pen (P)

• Click to put down corner points joined by straight lines. Press and drag to pull out handles for a curve; Alt while dragging moves only the handle going out, for a sharp turn.
• Click the first point to close the shape (drag there to curve the last part). Enter or Esc leaves it open. Backspace takes back the last point.
• Clicking the point you just made again takes its handle out, so the next part starts straight.
• Shift keeps the next point level, upright or at 45°.
• With a path picked, the pen adds a point where you click its line, and takes out a point you click on. Clicking the end of an open path carries on drawing from there.

Curvature (Shift+~)

Click points and the line bends smoothly through all of them. Alt+click or double-click makes a corner instead. Drag one of its points to move it; click one to switch it between smooth and corner. Click the first point to close; Enter or Esc finishes.

Pencil (N)

Draw freehand; the line is turned into smooth curves when you let go. End near where you began to close it. Smoothness (Properties, with the pencil picked and nothing selected) sets how smooth: 0 follows your hand closely, 10 gives few points and smooth curves. Pencil lines have no fill unless they are closed.

Shaper (Shift+N)

With the Pencil, it turns rough drawings into clean shapes: draw a rough rectangle, circle or ellipse, triangle, pentagon or hexagon, or a line, and it becomes an exact one in the fill and stroke colours (rectangles and ellipses stay live shapes; a rough line close to level, upright or 45° becomes exactly that). Scribble over shapes (back and forth): inside one shape, it goes; inside the place where shapes overlap, that piece is cut out; from one shape into another, the pieces you scribbled over become one shape, in the colour of the one you began in.

5. Anchor points

The Direct Selection tool (A, the white arrow) works on the points and curves of a path:

• Click a point to pick it, Shift+click for more, or drag a box round several. Drag to move them; the arrow keys nudge them.
• A picked point shows its handles: drag one to change the curve. On a smooth point the other handle turns with it; Alt moves just the one, making a corner.
• Drag a curve between two points to bend it; drag a straight line to move it.
• Delete with points picked removes them and the lines on either side (a closed shape opens there).
• Join (Ctrl+J) with two end points picked joins exactly those two ends (the two ends of one path close it).
• Corners: every picked corner point shows a small round mark just inside it. Drag a mark inwards to round all the picked corners together (the size shows as you drag). Properties › Corners sets the kind, Round, Inverted (a scoop round the corner) or Cut (a straight bevel), and a size to Apply exactly. This works on any path, not only rectangles.
• Average… (Ctrl+Alt+J, Object › Path) moves the picked points to the same height (Horizontal), the same place across (Vertical) or onto one spot (Both).

In the Pen's group: Add Anchor Point (+) adds a point where you click a line; Delete Anchor Point (−) takes one out and keeps the path as close to its shape as it can; Anchor Point (Shift+C) turns a smooth point into a corner with a click, pulls new handles out of a corner with a drag, and moves one handle alone.

6. Lasso, Magic Wand and working inside a group

• The Lasso (Q, with the Magic Wand) picks anchor points: draw a loop round them. Shift adds to what is picked, Alt takes away. Drag one of the picked points to move them all; Delete, the arrow keys, Join and Average work on them as with Direct Selection.
• The Magic Wand (Y) picks everything that looks like the shape you click. With nothing picked, Properties says what counts: Fill colour, Stroke colour, Stroke width, Opacity and Blending mode, each with a Tolerance (how far off still counts: for colours, 0–255 on each of red, green and blue). Shift+click adds, Alt+click takes away.
• Working inside a group (isolation mode): double-click a group with the Selection tool, or Object › Isolate group. Everything else fades and can't be picked, a bar at the top shows where you are, and what you draw or paste goes into the group. Double-click a group inside it to go deeper. Esc (with nothing picked), a double-click on empty space or ‹ in the bar goes back out one level; a name in the bar goes to that level.

7. Shapes

Rectangle (M), Rounded Rectangle, Ellipse (L), Polygon and Star share a button; Line (\), Arc, Spiral, Rectangular Grid and Polar Grid share another.

• Drag to draw. Shift makes a square, a circle or a 45° line; Alt draws from the middle. A size label follows the pointer.
• Click without dragging to type an exact width and height (or radius).
• Polygons, stars and spirals are drawn from their middle; the way you drag turns them (Shift keeps them upright). Set the number of sides, points, the star's inner size, the spiral's turns and the rounded rectangle's corners in Properties before drawing.
• Rectangles, ellipses, polygons and stars stay live shapes while you move and resize them: Properties › Shape changes their corners, sides or points afterwards. Editing their points (or turning a rectangle) makes them plain paths; Make it a plain path does it at once.
• Rectangular Grid: drag a box and it is cut into rows and columns of lines (a group: the frame and each line). Polar Grid: rings inside each other and lines out from the middle, like a dartboard. Set the rows and columns, or rings and dividers, in Properties before drawing; Shift makes it square or round, Alt draws from the middle, a click asks for the size.

8. Text

The Type tool (T):

• Click and type: one line, a new line with Enter (the click is where the first line sits).
• Drag a box and type: the words wrap inside it. Its width is Box width in the Type section.
• Click a path's line (any shape or line): the words run along it. The path becomes the text's path and loses its own paint, as in Illustrator; Along moves the words along it, Other side puts them on the other side.
• Click a text with the Type tool, or double-click it with the Selection tool (or pick it and press Enter), to change its words. Esc or Ctrl+Enter finishes; on a phone, Done. Text left empty is removed.

The Type section (Properties, with text picked): Font (21 fonts kept on this site: sans, display, serif, script, hand-drawn and mono), Size, Bold (where the font has it), Italic (slanted), Line height, letter Spacing (thousandths of the size) and left / centre / right. The fill and stroke chips colour text like shapes (gradients too), and effects work on it.

Create outlines (Ctrl+Shift+O, Type menu) turns text into shapes you can edit point by point; it can't be typed in after that. Text can be the top shape of a clipping mask (a photo inside the letters).

• Threaded text: with a text box picked, Run on into a new box (Properties › Text styles, or Type › Threaded text) makes a box beside it; the words that don't fit in the first box carry on in the second. Move and resize the boxes as you like; the words flow again. Thread the two picked boxes links two boxes (the second one's words go to the end), and Unthread cuts the thread before the picked box, which keeps the words it showed. Typing in any box of a thread types in the whole text. A dotted line joins the boxes while one is picked.
• Text wrap (Type › Text wrap › Make): the picked shapes push text boxes under them aside, and the lines go round them (on both sides where there is room). The shape must be above the text in the layers. Properties › Text wrap sets the Offset (the gap), and Release stops it.
• Character styles (font, weight, italic, size, spacing and fill colour) and paragraph styles (alignment and line height): New from this keeps the picked text's settings under a name, the lists put a style on the picked texts, and Redefine takes the picked text's settings into its style, changing every text with that style.
• Glyphs… (Type menu) shows every character of the font (accents, symbols, arrows…); click one to put it where you are typing, or at the end of the picked text.

Properties › Paragraph and more (hover a field for what it does):

• Columns and inset (text boxes): Cols splits the box into columns with a Gap between them; the words fill the first column to the box's bottom, then the next (the last one grows if there are more). Inset keeps the words that far inside the box's edge.
• Paragraphs (a paragraph ends where you pressed Enter): space Above and Below each one, indents from the Left and Right, and the First line's own indent. Tabs: a tab character (Tab while typing) moves on to the next multiple of this distance, to line words up in columns.
• Vertical: the letters go top to bottom and the lines from right to left, as in Chinese or Japanese signs. A text box wraps them at its bottom edge.
• On the path (text on a path): Rainbow (letters turn with the path), Skew (letters stay upright but lean along the path), Stair step (letters stay upright and level, each one placed on the path); and where the path runs through the letters: Baseline, the Top, the Bottom or the Middle.
• OpenType, where the font has it (the box says when it doesn't): Ligatures (fi and fl joined; on unless you turn it off), Fractions (1/2 drawn as a small fraction), Figures all one width (numbers that line up in tables). The fonts here have no alternate letter shapes.

• Touch Type (Shift+T, with the Type tool, or Type › Touch Type): click a letter to pick it and drag it to move it; drag the square at its top right to make it larger or smaller, and the circle above it to turn it (Shift: 15° steps). The text is still text: you can change its words, font and size. Put the letters back in Properties undoes every letter's change.
• Change case (Type menu): UPPERCASE, lowercase, Title Case or Sentence case for the picked texts.
• Find and replace… (Ctrl+Alt+F, Type menu): in the picked texts, or in every text when nothing is picked; it counts as you type and Replace all changes them, with Match case and Whole words only.
• Find font… (Type menu): every font the document uses, with how many texts; choose one and the font to use instead, and Change all.

Downloads keep the fonts inside the file, so the text looks the same anywhere. The fonts have Latin letters; other alphabets show in a font of your device and are left out of outlines.

9. Fill, stroke and colour

Every path has a fill (the inside) and a stroke (the line along it). The two chips under the tools (and in Properties › Appearance) show them: the front one is the one that swatches change. Click the chip behind to bring it to the front; click the front one to open its colours. X swaps which is in front, Shift+X swaps the fill and stroke colours, D sets a white fill and black stroke, / sets no paint. With nothing picked, the chips set what new shapes get.

The colour picker: None, Colour, Linear, Radial, Freeform or Mesh along the top; a square for lightness and strength, a rainbow bar for the hue, the hex code, recent colours and swatches, and (in browsers that have it) a dropper that picks any colour on the screen.

Swatches tab: a palette, This document's colours (+ adds the fill colour; right-click one to remove it; Collect the colours used gathers every colour in the drawing) and gradient presets.

Colour Guide (Swatches tab): colours that go with the fill colour, by the usual rules (complementary, split complementary, analogous, triad, tetrad), plus its shades and tints and warmer and cooler steps. Click one to use it; + at the end of a row adds the row to this document's colours. Swatch libraries below it hold ready palettes (Earth, Pastel, Neon, Skin tones, Greys, Ocean, Forest, Sunset, Retro), each with Add all to this document's colours.

The Eyedropper (I) copies a shape's fills, strokes, effects, opacity and blending onto the picked things; with nothing picked it sets what new shapes get.

More than one fill or stroke: with one path picked, Every fill and stroke lists them all, top first: show or hide each, move it up or down, remove it, change its paint or width, or add another. A wide stroke under a thin one in another colour makes an outline round a line, for example.

10. Gradients, freeform gradients and meshes

Pick Linear or Radial in the colour picker. The bar shows the gradient's colours: click a colour mark to change it, drag it along to move it, drag it down off the bar to remove it, click the bar to add one. At and Opacity set the picked mark exactly; Angle turns a linear gradient; the arrows button reverses it.

The Gradient tool (G) shows the gradient's line on the picked shapes: drag across them to set where it starts and ends (a radial one: from its middle out), or drag either end of the line. A plain fill becomes a gradient from its colour to white.

Freeform gradient (Freeform in the colour picker): colour points anywhere on the shape, blended smoothly between them. A new one has four points in colours that go with the shape's colour. With the Gradient tool, click inside the shape to add a point, drag a point to move it, Alt-click one to remove it; the picked point's colour is what the colour picker shows and changes (or click the chip in Properties › Freeform gradient). Spread sets how far the picked point's colour reaches. Lines joins the points in the order they were added, and the colours run along the lines.

Gradient mesh (the Mesh tool, U, beside the Gradient tool; or Object › Create gradient mesh… with rows, columns and Flat, Light in the middle or Light at the edges; or Mesh in the colour picker): a grid of colour points over the shape, the colours flowing between them along curved lines. Click a shape with the Mesh tool to make it a mesh, and click inside it again to add a row and a column there (the point where they cross gets a lighter colour, so they show). Drag a point to move it and bend the colours with it; Alt-click a point inside to remove its row and column. Pick a point, then change its colour in the colour picker or the chip in Properties › Gradient mesh, which also has One colour and Remove the mesh.

Freeform gradients and meshes move, resize and turn with their shape. They are drawn as a smooth picture inside the shape, so they look the same in SVG, PNG and PDF downloads, but other apps see them as a picture, not as points they can change.

11. Patterns, global colours, graphic styles and Live Paint

• Patterns (Swatches tab): with shapes picked, click a pattern to fill them with it (the stroke, when the stroke chip is in front). Properties › Pattern sets its Size, Turn and Shift on the shape; moving, resizing or turning the shape takes the pattern with it.
• Your own pattern: draw one tile, pick it, then New pattern from the picked things: its box is the tile, with an optional space round it, laid in a Grid, Brick across or Brick down. A pattern's menu (right-click it, or click it with nothing picked) has Tile options, Put the tile on the artboard (to change it) and Redefine from the picked things, which changes every shape filled with it.
• Global colours (Swatches tab): + makes one from the fill colour (picked shapes of that colour start using it). Click it to paint the picked things with it. Right-click it to change the colour, and everything painted with it changes (in symbols, brushes and patterns too). Choosing another colour for a shape in the picker unlinks that shape.
• Graphic styles (Swatches tab, or Object › Graphic style from this): keeps a shape's fills, strokes, effects, opacity and blending; click it to put them on the picked things (gradients are laid across each one). Right-click one to redefine, rename or delete it.
• The Live Paint Bucket (K, with the Eyedropper) fills an area that closed shapes make: where two circles overlap, the piece of one outside another, or the inside of one. The area becomes a filled shape of its own above them, in the fill colour (Shift: the stroke colour); clicking it again gives it the new colour.

12. Stroke options and the Width tool

The number beside the stroke chip is its width in pixels. Stroke options opens the rest:

• Ends: flat, round or square. Corners: sharp, round or cut.
• Where: on the line, inside or outside the shape (closed shapes only).
• Dashed line: up to two dash and gap lengths.
• Start and End: arrowheads (arrow, triangle, dot, square, diamond, bar) on open paths, with their size.
• Width profile: even, thin at both ends, at the end, at the start, thick in the middle, or thin in the middle.

The Width tool (Shift+W) makes your own profile: drag out from a stroke to make it wider or thinner there (each drag adds a width point; drag a point again to change it). Alt changes one side only.

13. Brushes, the Paintbrush and the Blob Brush

A brush draws a path's stroke as something richer than a line, and the path stays a path you can still edit. Pick one or more paths and click a brush in Properties › Brush (or in the Swatches tab's Brushes); Plain stroke takes it off. The stroke's colour and width still count: a wider stroke makes the brush bigger.

• Calligraphic (Round, Fine round, Oval nib, Flat nib): a pen nib with a size, an angle and a roundness, so the line gets thicker and thinner as it turns.
• Art (Taper, Taper end, Arrow): one drawing stretched along the whole path and bent with it.
• Scatter (Dots, Stars, Confetti): copies strewn along the path, with their size, spacing, scatter and turn (each can be random).
• Pattern (Dashes, Chain, Rope): a tile repeated end to end along the path, a whole number of times so it fits.
• Brush options (Properties, or a brush's menu in Swatches) changes its numbers; every path using it changes too. Use the stroke colour paints the art in the stroke's colour instead of its own.
• Your own brush: draw the art, pick it and choose Swatches › New brush from the picked things, then Art, Scatter or Pattern (or Calligraphic, which needs no art). Brushes are kept in the drawing (and in its editable SVG). A brush's menu also has Duplicate and Delete (strokes using a deleted brush become plain).
• Object › Expand appearance turns a brushed stroke into the shapes it draws.

The Paintbrush (B, in the Pencil's group) draws a path freehand with the chosen brush (choose it in Properties with nothing picked) in the stroke colour, with no fill. Smoothness works as for the pencil.

The Blob Brush (Shift+B) paints filled shapes in the fill colour, like a felt pen. Shapes you paint over that have the same fill and no stroke join into one shape. Its Size is in Properties; [ and ] change it while you paint.

14. Opacity, blending and effects

• Opacity and Blending (multiply, screen, overlay and the rest) are in Properties for whatever is picked.
• Effects (Properties › Add an effect, or the Effect menu, both in groups: 3D, Stylize, Blur, Distort & Transform, Texture): Drop shadow, Inner shadow, Outer glow, Inner glow (a soft light along the inside of the edge), Feather (the edges fade out), Blur, Roughen and Grain (a speckled texture, its amount and size). Each can be changed, hidden with its eye, or removed; they stay live, so the shape underneath can still be edited.
• Round corners rounds every corner of the shape by a radius while it stays live (unlike Object › Path › Round corners, which changes the points). Scribble draws the fill as loose back-and-forth lines in the fill colour: line width, spacing, angle, looseness and Shuffle. Halftone draws the fill as dots on a turned grid, larger where the fill is darker: on a gradient they grow from the light end to the dark end; a plain colour gets even dots. Strokes stay as they were.
• Effects that change the shape itself: Warp (see below), Zig Zag (size, ridges per part, points or smooth waves), Pucker & Bloat (below 0 pulls the points out and the sides in, like a star; above 0 the other way, like a flower), Twist (turns the middle more than the edges), Transform (copies of the shape, each moved, resized and turned from the one before) and Offset path (larger or smaller by a distance). They work on paths and groups, one after the other in the list's order, and the path keeps its own points: Object › Expand distortions makes the points what you see.

15. Warp, envelopes, Free Transform and Puppet Warp

• Warp (Effect › Warp, or Object › Envelope distort › Make with warp): bends the picked art in one of 15 ways (Arc, Arc lower, Arc upper, Arch, Bulge, Shell lower, Shell upper, Flag, Wave, Fish, Rise, Fisheye, Inflate, Squeeze, Twist), across or up and down, by its Bend; Across and Down add a perspective-like slant.
• Envelope mesh (Object › Envelope distort › Make with mesh): a grid of rows and columns over the art. With the Selection tool, drag the grid's points and the art bends smoothly with them (the points on the edge move the outline; the inner ones bend what is inside). Properties › Envelope mesh: Flat again, Release (takes the mesh off) and Expand.
• The Free Transform tool (E) shows the picked things' box: drag a corner to resize, drag just outside one to turn, and drag a side's middle mark along the side to slant the box (the opposite side stays; across the side it resizes). Properties › Free Transform also has Perspective (a corner and the one beside it move in step, the other way, for perspective) and Free Distort (below).
• The Free Distort tool (with Free Transform) shows the picked things' box with a handle at each corner: drag a corner and the shapes stretch in perspective to the new four corners. Shift moves the corner beside it the other way, for an even taper. This changes the points themselves (undo puts them back).
• Puppet Warp (with Free Transform): the picked art gets three pins across its middle. Drag a pin and the art bends round the others, keeping its shape as well as it can, like a puppet's limb; click the art to add a pin where you want a joint, and Alt-click a pin to remove it. Each drag is one step to undo; the pins start again when you pick something else.

16. 3D and the perspective grid

3D (Effect › 3D, or Properties › Add an effect) makes flat art solid, drawn as shaded faces:

• Extrude & Bevel: the shape pushed back by a Depth, with sides; Bevel cuts a slanted edge round the front (best on simple shapes). Holes stay holes.
• Revolve: the path spun round an upright line at its left edge, like a vase on a potter's wheel: draw half of the outline (an open path works best). Sides sets how smooth it is.
• Inflate: the shape puffed up like a cushion or a balloon, front and back; Puff sets how much.
• Turn it: drag the small cube in the effect (across turns it round, up and down tips it), use a preset (Front, Left, Right, Above, Isometric), or type the angles (Across, Up, Turn). Perspective makes the far parts smaller.
• The light: Light from (its direction round the art), Light height (higher lights the front more) and Shading (how dark the faces away from it get). The colour comes from the fill (or the stroke, for a path with no fill); change it as usual and the faces follow.
• It stays live: edit the path and the 3D follows. Object › Expand distortions turns it into a group of flat shapes, one per face. Scribble and Halftone expand the same way.

The perspective grid (View › Perspective grid, Ctrl+Shift+I, or the Perspective Grid tool, Shift+P) shows planes that meet at vanishing points on the horizon: a left wall (green), a right wall (red) and the floor (blue).

• Properties › Perspective grid: 1 point, 2 points or 3 points (the uprights lean towards a third point below), and which plane you Draw on: Left, Floor, Right or None.
• With the Perspective Grid tool, drag the round handles: the vanishing points (filled), the horizon, the near corner, the near edge's height and how far the planes reach. Reset the grid puts it back; Hide hides it. The grid is kept with the document.
• With a plane chosen, the Rectangle and Ellipse tools draw on it, in perspective (choose None to draw flat again).
• The Perspective Selection tool (Shift+V) drags art along its plane, getting smaller as it goes further away; dragging flat art puts it on the chosen plane. Put the picked art on it does that for the picked things; Release leaves art where it is but takes it off the plane. Moving or resizing art with the other tools also takes it off its plane.
• When you let go of a grid handle, the art on the planes is redrawn to fit the new grid.

17. Path tools

In Object › Path and Properties › Quick actions:

• Join (Ctrl+J): joins the two nearest open ends of the picked paths into one path, or closes a single open path.
• Close, Reverse direction (which way a path runs: it changes where arrowheads and width profiles go).
• Simplify…: fewer points within a distance you choose, with a live preview and the number of points before and after. Good after the pencil.
• Smooth: every point made smooth. Add anchor points: a new point in the middle of every part.
• Round corners…: rounds every corner of the picked paths by a radius (with Direct Selection, only the picked points).

• Offset path…: a copy larger by a distance (or smaller, below 0), with round, sharp or cut corners, previewed as you type. It goes under the shape (a smaller one over it).
• Outline stroke: the stroke becomes a filled shape of its own (with its ends, corners, inside / outside place and width profile; dashes and arrowheads aren't kept), grouped with the fill.
• Expand appearance (Object menu): every fill and stroke of a path becomes a shape of its own (a brushed stroke: the shapes the brush draws).

The Scissors (C) cut a path where you click: a closed shape opens there; an open path becomes two. The Knife (with the Scissors) cuts filled shapes along your drag: drag right across a shape and it becomes two (or more) closed shapes with the same colours. Hold Alt for a straight cut. With something picked, only the picked shapes are cut.

With the Pencil, Shaper and these, under one button:

• Smooth: drag along a picked path and it gets smoother where you drag (drag again for more). Its size is in Properties.
• Path Eraser: drag along a picked path to rub out that part of the line itself (a closed shape opens there; the Eraser instead cuts through filled areas). Its size is in Properties.
• Join: drag across the gap between two open ends and they are joined; across both ends of one path, it closes. The open ends show as small red rings.

The Reshape tool (with Scale and Shear): drag a picked path from any place on it, and the points near where you pressed follow, less and less the further away they are, for a soft bend without picking points.

18. Pathfinder, Shape Builder and the Eraser

Pathfinder (Properties › Quick actions with two or more shapes picked, or Object › Pathfinder) makes one shape from several:

• Unite: all of them as one shape (the top one's colours).
• Minus front: the bottom one with the others cut out of it. Minus back: the top one with the others cut out.
• Intersect: only where they all overlap. Exclude: where an odd number overlap (the overlaps become holes).
• Divide: cut into every piece the outlines make, each in the colours of the shape on top there, as a group.

The Shape Builder (Shift+M): pick overlapping shapes, then drag across the pieces you want as one shape (they light up as you go); Alt-drag or Alt-click removes pieces instead. The other pieces stay as separate shapes.

The Eraser (Shift+E) rubs out parts of shapes along your drag (only the picked ones when something is picked; else whatever is under it). Lines without a fill are cut where it crosses them. Its size is in Properties with nothing picked.

19. Groups, clipping masks and compound paths

• Group (Ctrl+G) and Ungroup (Ctrl+Shift+G). A group moves and resizes as one; double-click it to work inside it.
• Clipping mask (Ctrl+7): the topmost picked shape cuts the others to its outline (a picture inside a circle, say). Release it with Ctrl+Alt+7.
• Opacity mask (Object menu): the topmost picked thing masks the others by its lightness: where it is white they show, where it is black they are hidden, and greys and gradients show them partly (a fade-out). In Properties: Clip (off: what is outside the mask shows too), Invert and Release, which puts the mask back as a shape on top.
• Compound path (Ctrl+8): the picked paths become one, and where they overlap there is a hole (a ring from two circles). Release it with Ctrl+Alt+Shift+8.
• Arrange: bring to front (Ctrl+Shift+]), forward (Ctrl+]), backward (Ctrl+[), to back (Ctrl+Shift+[).
• Lock (Ctrl+2) and Hide (Ctrl+3) keep things out of the way; Unlock all and Show all add Alt.

20. Layers

The Layers tab lists the layers, top first, and what is on each (open a layer or group with its arrow). Each row has an eye (show / hide) and a lock. Click a row to pick it (Shift or Ctrl adds); double-click a name to rename it. Drag rows to restack them, also into another layer.

+ Layer adds a layer above the current one (new things go into the current layer: click a layer's name to make it current); the bin deletes it; Move picked to… moves what is picked to another layer. Each layer has a colour, used for its picked outlines.

21. Align, guides and snapping

• Align (Properties): left, middle and right edges; top, middle and bottom. To each other, to the key object (it stays put) or to the artboard. With one thing picked, it lines up with its artboard. The two buttons after them make the gaps between three or more things even, across or down.
• The key object: with several things picked, click one of them again (without dragging): it gets a thick outline and the others align to it. Click it again for none. Without a click, the first picked is the key.
• Gap with Across / Down spaces the picked things exactly that many px apart; the key object (else the first along) stays where it is.
• Smart guides (Ctrl+U): while you move, draw or resize, edges and middles snap to other things and to the artboards, with a pink line where they line up. Snap to points catches other paths' points (a pink square). Hold Ctrl while dragging to stop snapping for a moment.
• Snap to the grid with its spacing: in Properties with nothing picked, or the View menu. View › Show the grid (Ctrl+') draws it, every fifth line darker (fewer lines when zoomed far out).
• Snap to pixel (View menu): points, shapes and moves land on whole pixels, for crisp icons and screen art.
• The Measure tool (with the Eyedropper, or View › Measure tool): drag between two places to see the distance, the angle and how far across and down; it snaps to points, and Shift keeps it level or at 45°.
• Guides: drag one out of a ruler; drag it back onto the ruler to remove it. View › Remove every guide.

22. Artboards

A document has one or more artboards: the pages that are downloaded. Things can sit outside them, on the grey around, and aren't downloaded there.

• The Artboard tool (Shift+O, or the artboard button in Properties with nothing picked): drag on the grey to make a new one; drag one to move it along with the art on it (Alt makes a copy of the artboard and its art); drag its handles to resize it; Delete removes it (the art stays).
• Properties shows the picked artboard's name, place and size, sizes to pick from, Turn (portrait / landscape), Fit to art (to what is picked, or to everything), New artboard and the list of artboards (click one to go to it).

23. Symbols, Repeat and Blend

Symbols

A symbol is art used many times: change it once and every copy changes. Object › Make a symbol… (F8) turns the picked things into one, with a copy in their place. The Swatches tab lists the symbols: click one to put a copy on the artboard; its ⋯ has Redefine from the picked things (every copy changes to the art you picked), Rename and Delete. Copies can be moved, resized, turned and given opacity and effects of their own; Break link turns a copy into plain shapes.

Repeat

Object › Repeat keeps copies of the picked art in a pattern, live: change the art (double-click into the group) and every copy follows.

• Radial: copies round a centre, with how many and the Radius.
• Grid: rows and columns with gaps, and Row shift for a brick pattern.
• Mirror: a mirrored copy beside it (across or down) with a gap.

The Repeat section (Properties) changes the kind and numbers; Expand makes the copies real shapes; Remove repeat keeps only the art.

Blend

The Blend tool (W): click one shape, then another, and the steps between them are made, changing shape, colour, stroke and opacity on the way (how many steps: Properties with nothing picked). With two paths picked, Blend in Quick actions or Ctrl+Alt+B does the same. The result is a group.

24. Image Trace and Recolour

Image trace (pick a picture: Quick actions, the Object menu or right-click) turns a picture into shapes: Black and white by a Threshold, or Colours (2 to 16, found in the picture). Detail is how many pixels across it looks at, Smoothness how smooth the curves are, Skip specks leaves out tiny bits. Sharp corners stay sharp. The result is a group of shapes, one per colour, in the picture's place (Keep the picture keeps it hidden underneath).

Recolour (Quick actions or Object › Recolour…) lists every colour in what is picked: click a new colour to change it everywhere, or move Hue, Strength and Lightness for all of them together. Shuffle swaps the colours round; Reset starts again; Cancel puts everything back.

25. Graphs and the Dimension tool

The Graph tool (J): drag a box (or click for an exact size), then type or paste the data: one row per line, cells split by tabs or commas, so a copy from a spreadsheet pastes straight in. The first row names the series (leave its first cell empty); each other row starts with its label, then its numbers.

• Kinds (choose before drawing in Properties, or change it after): Column, Stacked column, Bar (across), Line, Area (stacked), Pie (one pie per series) and Scatter (each row: a label, an x and a y).
• Properties › Graph: Edit the data…, Legend, Values on the graph and a colour per series (per slice for pies). Axes get round numbers by themselves.
• A graph is a group: move, resize and turn it as usual, and it is drawn again in place when its data or kind changes. Ungroup it to change its shapes one by one (it is no longer a graph then); changes made to shapes inside it are lost when it is drawn again.

The Dimension tool (with Measure): drag from one point to another (it snaps to points; Shift for 45° steps) and a dimension line is drawn: arrowheads, short end lines and the length in pixels above it, as a group you can style.

26. Rasterize, crop, flatten and clean up

• Rasterize… (Object menu): the picked things become one picture, at 72, 150 or 300 ppi, see-through or on white. Effects and strokes are kept in the picture.
• Flatten transparency (Object menu), against white: see-through plain colours become the solid colour they look like on white; things with effects, blending or see-through gradients become a picture.
• Crop image (Object menu, with a picture picked): drag the box's edges or corners, or inside it to move it, then Enter or Apply in Properties (Esc stops). What is outside is gone from the picture, and the rest stays where it was.
• Split into grid… (Object › Path): a shape becomes rows and columns of rectangles over its box, with a gap between them, in its colours.
• Clean up… (Object › Path): removes stray points (paths of one point), unpainted objects (no fill, stroke or effect; clipping shapes stay), empty text and empty groups.
• Document info… (File menu): the artboards, how many paths, points, groups, texts and pictures there are, the fonts and colours used, and how much room the document takes in this browser.

27. Actions and version history

Actions (Swatches tab › Actions, or the Object menu) do a set of steps again on other things. Record a new action, name it, then do what you want kept to the picked things: menu items, buttons and settings in Properties, colours, effects, and moves, resizes and turns with the tools (kept round the picked things' middle, so they work on things elsewhere). The steps show as you go; Stop keeps it. Then pick other things and press its play button (or Object › Play): it is one step to undo. Of the menu items that open a window (…), only some are kept, as what you chose in it: Move, Rotate, Reflect, Scale, Round corners, Simplify, Split into grid, Clean up and Rasterize; the others are left out of the action. Actions are kept in this browser and work in every document.

Version history… (File menu): Keep this version stores a copy of the document as it is now, with a name and a thumbnail, in this browser; Restore brings one back (Undo goes back again) and the bin deletes it.

28. Saving, opening and downloading

• Kept in this browser: documents are saved here as you work, with no account. Clearing the browser's site data deletes them, so download what you want to keep.
• Download (Ctrl+E): SVG, PNG, JPG, WebP or PDF (one page per artboard, as vectors; text goes in as outlines, and effects such as shadows and blurs are left out). Pictures at 0.5× to 4× with an optional see-through background. With several artboards: each as its own file, all in one, or just one. Only what is picked downloads just that, trimmed to it. An SVG made with Keep it editable opens here again exactly as it was (layers, live shapes, effects).
• Export for screens (File menu, Ctrl+Alt+E): every artboard (or only the picked things) in each size you tick (0.5× to 4×; a 2× file is named name@2x) and each format (PNG, JPG, WebP, SVG), all in one ZIP file named after the artboards.
• Open (File › Open, Ctrl+O): an SVG file or a picture as a new document. SVG paths, shapes, groups, gradients, strokes, opacity, clip paths, text and embedded pictures come in as things you can edit.
• Place (File › Place…, Ctrl+Shift+P), or drop files on the drawing, or paste: adds SVGs and pictures to the open document, made to fit the artboard. Pictures over 16 megapixels are made smaller.
• Copy and paste: Ctrl+C also puts SVG code on the clipboard, so shapes paste into other apps that take SVG. Paste in place (Ctrl+Shift+V), in front (Ctrl+F) and in back (Ctrl+B) of the picked things.
• Edit › History… lists every step; click one to go back to it.

29. On a phone

• The most used tools are along the bottom, with their names: Selection, Direct Selection, Pen, Pencil, Type and the shapes. More at the end opens every tool, under headings. A tool with a corner mark holds more: tap it again, or hold it, to see them in a strip above.
• The fill and stroke squares stay at the left of the tool row: tap the one in front to change its colour, tap the one behind to bring it to the front.
• Two fingers pinch to zoom and move the drawing. The number at the top right shows the zoom: tap it to fit the artboard, fit everything or pick a size.
• The round ⇧ button at the left is the keyboard's modifier keys: hold it with one finger while you drag with another for Shift (keep the shape, 45° steps, add to the selection), or slide the holding finger out past its edge for Alt (drag a copy, resize from the middle, Alt-click with the Mesh, Gradient and other tools). A quick tap keeps Shift on until you tap it again.
• With something picked, a bar offers what fits it: Duplicate and Delete, then Ungroup for a group, Edit for a text, Points for a path, Group and Align for several things, then Front, Back, Style (the Properties sheet) and More (the rest of the right-click menu). Holding a finger still on the drawing with a selection tool also opens that menu.
• The sliders button at the top opens Properties, Layers and Swatches as a sheet, with colours and opacity first. Drag its handle to make it lower or taller (tap the handle to switch between half and full height), or down to close it; the drawing moves so what you picked stays in sight above it. Folded sections stay as you left them.
• While drawing with the Pen or Curvature, Done finishes the path and Undo takes back the last point. While typing, Done finishes the text.
• Turn a picked thing with the round handle above its box.
• The ⋯ menu lists the top menus (File, Edit, Object, Type, Select, Effect, View): tap one to open it, and Menus to go back. Redo is in Edit, or hold the Undo button.

30. Keys

On a Mac, Cmd works wherever Ctrl is written, and Option is Alt.

31. Good to know

• Units are pixels; an A4 artboard is 794 × 1123, which prints at A4 at 96 dpi.
• The boolean maths (Pathfinder, Shape Builder, the Eraser, Offset path, Outline stroke) works on smooth curves by laying many short lines along them and fitting curves back, so very complex shapes take a moment and come back with more points than before.
• Effects, blending and inside / outside strokes are SVG filters, masks and clip paths in the downloaded SVG, so most apps and browsers show them; some older apps leave filters out.
• Pictures are kept inside the document, so a document with many big photos takes room in the browser.
• Nothing you draw is sent anywhere: the page itself stops the browser from sending anything out.