How to edit an SVG file online (step by step)
Practical tutorial
Editing an SVG doesn't require heavy software. With an online editor like svgdesk you can do it from your browser, free and with nothing to install. Files are processed on your device, not uploaded to any server.
1. Open the SVG file
You have two ways: drag the .svg file straight onto the work area, or click Upload SVG in the top bar. You can also start from scratch with New and choose the canvas size.
2. Select a shape
With the selection tool (arrow) click any element. Handles appear to move, scale from sides or corners, and a dot to rotate. Drag to move; use the corners to resize.
To select several shapes at once, hold Shift and click each one, or drag a selection marquee over an empty area: everything fully contained inside gets selected. With several selected you can move them or change their color together.
3. Change colors and style
In the right panel adjust the fill, stroke, width, opacity and rotation. You can type a hex color or use the picker. To remove fill or stroke, use the "no color" button.
4. Edit the nodes (optional)
To change the shape itself, enter node mode: double-click a shape. You can move anchors, turn corners into curves, adjust the bezier handles and add or delete nodes. Useful for refining strokes precisely.
5. Group or split elements
With several shapes selected click Group (or Ctrl+G) to treat them as one. Ungroup (Ctrl+Shift+G) undoes the group. If an icon is a single compound path made of several parts (for example an apple and its leaf in one path), Ungroup splits it into separate paths so you can give each part a different color.
6. Edit the code directly
The SVG code panel is editable and syncs live. If you know some SVG, you can paste or modify the code and see the result instantly. The Optimize button cleans the code (hex, rounding, no metadata) without breaking the image.
7. Export your work
Click Export. In the dialog you set the file name (defaults to the catalog icon's or the uploaded file's name, or "untitle" if you started from scratch) and choose SVG (vector) or PNG (high-resolution image, 2x). If you try to leave with unsaved changes, the editor warns you and offers to download first.
Handy shortcuts
- V select, R rectangle, E ellipse, L line, P pen, D pencil, N nodes.
- Ctrl+Z undo, Ctrl+Shift+Z redo.
- Ctrl+G group, Ctrl+Shift+G ungroup/split, Ctrl+D duplicate.
- Del delete selection, Esc cancel or exit node mode.
- Shift while moving a node locks the axis; while drawing it forces a square/circle/straight line. Shift+click or marquee: multi-selection.
You can also change the editor's look: the Theme button (header) toggles the interface between dark and light mode, and Background toggles the canvas checkerboard.