How to use the svgdesk editor
Complete guide to the tool
svgdesk is an SVG graphics editor that runs in the browser, free and with nothing to install. Everything is processed on your device. This guide covers every part of the editor.
1. Create or open a document
- New New: opens a dialog to choose the canvas size (or a standard SVG preset: 16, 24, 32, 48, 64, 128, 256 or 512 px).
- Upload SVG Upload SVG: loads a
.svgfile from your device. You can also drag it onto the work area. - Catalog: in Icons pick one and click "Edit in svgdesk"; it opens loaded.
2. The toolbar (left)
- ↖ Select (V): move, scale and rotate shapes.
- ▭ Rectangle (R), ◯ Ellipse (E), ╱ Line (L): draw by dragging. Hold Shift to force a square, circle or straight line (0/45/90 degrees).
- ✎ Pen (P): polygons/curves; click to add points, double-click to close, Esc cancels.
- ✐ Pencil (D): freehand stroke.
- ◇ Nodes (N): edit a shape's points.
3. Select and transform
- Click a shape to select it; drag to move it.
- Handles on the corners/sides to scale; the pink circle to rotate.
- Shift+click: select several shapes and move/change them together.
- Drag a marquee over an empty area: area selection; everything contained inside gets selected.
- Duplicate Duplicate (or Ctrl+D): creates an offset copy of the selection.
- Right-click an element opens a menu with the available actions (duplicate, group/ungroup, layers, delete).
- Click an empty area to deselect.
4. Properties panel (right)
- Fill and Stroke: color (hex), or "no color".
- Width, Opacity, Fill opacity, Rotation.
- With several shapes selected, changes apply to all.
5. Layers (Z order)
In the element panel, with the Layers buttons you can bring to front ⤒, move up ↑, move down ↓ or send to back ⤓ the selection. The order defines which shape stays on top.
6. Group and ungroup
- With several shapes selected: Group Group (or Ctrl+G) joins them into a group that moves and transforms as one.
- Ungroup Ungroup (or Ctrl+Shift+G) undoes the group.
- If you select a compound path (a single
pathwith several parts, like an apple with its leaf) and click Ungroup, it splits into separate paths; that way you can give each part a different color.
7. Editing nodes and bezier curves
- Double-click a shape (or key N) to enter node mode.
- Drag the anchors; hold Shift to lock the axis.
- Convert to curve (or double-click a node) so it gains bezier handles; drag the pink points.
- Symmetric or free handles (Alt while dragging breaks the symmetry).
- Click the midpoint of a segment to add a node; Del to remove it.
- Shift+click on nodes to select and move several together.
- Drag a marquee over an empty area (in node mode) to select all the nodes inside.
8. Live SVG code
The bottom panel shows the SVG code and is editable: what you type is reflected on the canvas. The Optimize Optimize button cleans the code (colors to hex, rounds numbers, removes metadata) without breaking it.
9. Canvas background and theme
The background button ◷ Background (in the header) toggles the canvas checkerboard between light and dark, useful to see black or white edges clearly.
The theme button ☀ Theme switches the whole editor interface between dark and light mode. Both settings are remembered for your next visit.
10. Undo / Redo
↶ Ctrl+Z undoes, ↷ Ctrl+Shift+Z redoes. Every action is kept in history.
11. Export
Click Export Export. In the dialog you set the file name (defaults to the catalog icon's or the uploaded file's name, or "untitle" for a new canvas) and choose SVG (vector) or PNG (high-resolution image, 2x). If you try to leave with unexported changes, the editor warns you and offers to download first.
Keyboard shortcuts
- V select · R rectangle · E ellipse · L line · P pen · D pencil · N nodes
- Del / Backspace delete · Esc cancel/exit
- Ctrl+Z undo · Ctrl+Shift+Z redo
- Ctrl+G group · Ctrl+Shift+G ungroup / split paths · Ctrl+D duplicate
- Shift lock axis when moving a node / square-circle-straight line when drawing · Shift+click or marquee: multi-selection · Alt break handle symmetry