How to edit an SVG file
An SVG is a text file that describes shapes, so you can edit it visually in a vector editor or directly as code. Pick the method that matches the change you need:
| Method | Best for | Cost | Install |
|---|---|---|---|
| Online SVG editor (Vectopea) | Moving, reshaping and recolouring shapes; editing paths node by node | Free | None |
| Code editor | Small precise tweaks: one colour, a stroke width, an attribute | Free | None |
| Inkscape | Heavy illustration work, PDF/EPS, bitmap tracing | Free | Desktop app |
| Adobe Illustrator | Print workflows and existing .ai projects | Subscription | Desktop app |
Method 1: Edit an SVG online
This works on any computer, including school or work machines where you can't install software.
- Open the free online SVG editor and drop your
.svgfile on the page, or choose File → Open SVG in the editor. - Move, scale or rotate a shape: press V, click it, and drag it or its handles. Type exact values in the Properties panel.
- Recolour it: with the shape selected, click the fill or stroke swatch in the top bar.
- Reshape a path: press A for direct selection, then drag anchor points and Bézier handles. Double-click a segment to add a point, Alt-click a point to switch between smooth and corner, and press Delete to remove selected points.
- Edit text: double-click a text object and type.
- Export: use Export SVG (readable or minified) or Export PNG from the File menu.
The SVG tab in the right panel shows the exact markup being exported. You can edit it there and apply it back to the canvas.
Quick edits without opening an editor
- Swap colours across the whole file: SVG color changer
- Change width and height without distortion: Resize SVG
- Remove empty space around the artwork: Crop SVG
- Shrink the file size: SVG optimizer
Method 2: Edit the SVG code
Open the file in any text editor, or paste it into the SVG code editor for a live preview. The attributes you'll change most often:
| To change | Edit this | Example |
|---|---|---|
| Fill colour | fill | fill="#7c4dff" |
| Outline | stroke, stroke-width | stroke="#000" stroke-width="2" |
| Displayed size | width, height on <svg> | width="48" height="48" |
| Visible area | viewBox on <svg> | viewBox="0 0 24 24" |
| Position | x/y, cx/cy or transform | transform="translate(10 0)" |
| Text | The content of <text> | <text x="10" y="20">Hello</text> |
Path shapes live in the d attribute of <path>. Editing those numbers by hand is slow; paste the value into the SVG path editor to see every point.
Method 3: Edit an SVG in Inkscape
- Install Inkscape from inkscape.org and open the file with File → Open.
- Use the Select tool (S) to move shapes and the Node tool (N) to edit paths.
- Save with File → Save As → Optimized SVG or Plain SVG to avoid Inkscape-specific metadata.
Method 4: Edit an SVG in Adobe Illustrator
- File → Open the SVG. It opens as editable vector artwork.
- Edit with the Selection (V) and Direct Selection (A) tools.
- Save with File → Export → Export As → SVG. Choose "Presentation Attributes" styling for the most compatible output.
Common problems
The file opens as a blank or black shape
Shapes without a fill render black, and shapes outside the viewBox are invisible. Open the file in the SVG viewer to check the viewBox and the rendered result.
Fonts look different after editing
SVG text uses fonts installed on the viewer's device. Embed the font or convert the text to outlines in your design tool before sharing.
The file got much bigger after saving
Desktop editors add metadata. Run the final file through the SVG optimizer.