Getting started
Open, paste (Ctrl+V) or drop an SVG file. The left pane shows its source, the middle the preview, the right the selected element's properties. Edits in the preview or panel update the source; edit the source and press Apply to re-render. Export saves the result.
Select
| Click element | Select it |
| Shift/Ctrl+Click | Add to / remove from the selection |
| Alt+Click | Select the element's parent group |
| Shift/Ctrl+Drag | Box-select elements fully inside the box, adding to the selection |
| Click open space | Deselect all |
| Delete / Backspace | Delete the selected elements |
Move, scale, rotate on the canvas
| Drag a shape | Move it, with the rest of the selection (Shift: straight lines only) |
| Square handles | Scale from the opposite side (Shift: keep proportions, Ctrl: symmetrically about the centre — combine both for a uniform scale from the centre). Drag past the far side to mirror |
| Round handle | Rotate about the centre (Shift: 15° steps) |
| ←→↑↓ | Nudge the selection 1 unit (Shift: 10) |
One element's handles sit on its own box, so they turn with it; several share one box. In node mode the handles step aside for the nodes.
Snapping
| 🧲 Snap | Moving, scaling and node dragging snap to other elements' edges and centres, the document's edges and centre, and the path's other nodes. A magenta line shows the match |
| ⊞ Grid · G | Show the grid and snap to it; the box beside it sets its size in document units |
| Scaling | Snaps the dragged side when the box is square to the page (not when rotated) |
View
| Drag open space | Pan |
| Space+Drag | Pan from anywhere, even over shapes |
| Middle-button Drag | Pan from anywhere |
| Mouse wheel | Zoom at the pointer |
| Fit · 1:1 | Fit the drawing to the pane · actual size |
| BG swatches | Preview background (dark, grey, white, checkerboard) |
Edit nodes — mouse
| Double-click shape | Edit its nodes (or use ✎ Nodes / N, then click a shape) |
| Click node | Select it and show its curve handles |
| Drag node / handle | Move the node (handles follow) / reshape the curve |
| Shift+Click outline | Add a node there |
| Double-click outline | Add a node there |
| Ctrl+Click node | Delete that node |
Edit nodes — keyboard
| N | Toggle node mode |
| G | Toggle the grid |
| ←→↑↓ | Nudge the selected node 1 unit (Shift: 10) |
| Tab / Shift+Tab | Next / previous node |
| Delete / Backspace | Delete the selected node (the shape, if no node is selected) |
| Esc | Deselect the node, then leave node mode |
Node inspector
| X · Y | Position of the selected node |
| Node | Corner (free handles), Smooth (handles in line), Symmetric (in line, equal length) |
| Make line / curve | Straighten or curve the segment after the selected node |
| Add node | Split the segment after the selected node in half |
Rect, circle, ellipse, line, polyline and polygon become an equivalent <path> on their first node edit; edited paths are rewritten as absolute commands.
Properties panel
Every field applies as you type, drag or pick; the change is saved to the source and undo history when you leave the field (or press Enter). Drag a Transform label left/right to scrub its value (Shift ×10, Alt ×0.1).
| Move x · y | How far the element's centre has been shifted |
| Rotate · Scale | Turn / resize about the element's centre, marked ⊕ on the canvas; lock keeps scale x and y equal |
| Flip H · V | Mirror about the centre |
| Several selected | Changes are relative and act on the selection as a whole, about its combined centre |
General
| Ctrl+Z | Undo |
| Ctrl+Y / Ctrl+Shift+Z | Redo |
| Ctrl+Enter / Ctrl+S | Apply the source (in the code pane) |
| ? | Show this help |