How to edit an SVG file
Everything you need to change in an SVG — colours, text, shapes, size — and how to do each one. Drop your file above and follow along.
Drop an SVG here
or
Your file never leaves your device — it opens locally in your browser.
First, what an SVG actually is
An SVG is not a picture in the way a JPG is. It is a text file full of XML that describes shapes — "a circle here, this big, this colour; a path from here to there with this curve". Your browser reads those instructions and draws the result.
That is why an SVG stays razor-sharp at any size, and why it is genuinely editable: every shape is still a separate object with its own properties, not a flattened grid of pixels.
Use the right tool
- A vector editor — the right answer. Every shape stays editable and the file stays vector.
- A text editor — works for a quick colour swap if you are comfortable with XML. Fragile for anything more.
- Photoshop — avoid. It converts the SVG to pixels, which destroys exactly what makes it an SVG.
- Word or PowerPoint — recolour and resize only. You cannot edit individual shapes.
The four things people actually need to change
1. Colours
Click the shape, then set its fill (inside) or stroke (outline). These are separate properties, which is the usual reason a shape appears to half-ignore a colour change. Full walkthrough: changing the colour of an SVG.
2. Text
Double-click live text to retype it. If nothing happens, the text was converted to outlines before the file was saved — the letters are now plain shapes and the words no longer exist as text. You can still reshape them, but you cannot retype them. There is no way to reverse that; you would have to delete it and set fresh text.
3. Shapes and paths
Switch to Direct Selection (A) and click a path to reveal its anchor points. Drag an anchor to move it, or drag a bezier handle to change the curve. See editing SVG paths for the full detail.
4. Size
Select everything, set the width and height with the aspect-ratio lock enabled, then set the artboard separately so the canvas fits your artwork. More on resizing an SVG.
Two things that trip people up
Grouped shapes. Clicking selects the whole group. Direct Selection (A) reaches the individual shape without breaking the group apart.
Missing fonts. If an SVG uses live text in a font you do not have, it falls back to a different font and the layout shifts. Either install the font, or set the text in a font you do have.
Saving your work
Export as SVG to keep everything editable and resolution-independent — that is your master copy. Export PNG, JPG or PDF as delivery copies for anywhere that will not accept an SVG. Never throw the SVG away and keep only a PNG; you cannot get the vector back.
How to edit an SVG file
- Open the SVG. Drop the file above. It opens on the canvas with every shape selectable — no install, no account, and nothing is uploaded.
- Click the thing you want to change. Click any shape to select it. If it is inside a group, use Direct Selection (A) to reach it without ungrouping the whole thing.
- Change colours. Use the Fill swatch for the inside of a shape and the Stroke swatch for its outline. They are separate — that is why part of a shape sometimes seems to ignore a colour change.
- Edit text. Double-click any live text to retype it. If the text was converted to outlines before you got the file, it is shapes now and can only be edited as paths.
- Reshape paths. With Direct Selection, drag an anchor point to change the geometry, or drag a bezier handle to change the curve.
- Resize properly. Select everything, set the width and height with the ratio lock on, then set the artboard to match so you do not export a lot of empty space.
- Export. Save as SVG to keep it editable and scalable, or export PNG, JPG or PDF for somewhere that will not take an SVG.
Common questions
How do I edit an SVG file?
Open it in a vector editor and click the element you want to change. Drop your file above and it opens in your browser — no software to install, and you can edit colours, text, paths and size straight away.
Can I edit an SVG in Word or Photoshop?
Not properly. Word only lets you recolour and resize the whole graphic. Photoshop rasterises it into pixels, which throws away the vector data that makes an SVG worth having. Use a vector editor.
Can I edit an SVG in Notepad?
Technically yes, because an SVG is XML text. In practice it is painful for anything beyond a quick colour swap, and one mistyped character breaks the whole file.
Why can I not select one shape inside my SVG?
It is grouped. Use the Direct Selection tool (A) to click straight through to the individual shape, or ungroup with Ctrl/Cmd+Shift+G.
Why can I not edit the text in my SVG?
The text was almost certainly converted to outlines before the file was saved. That turns letters into plain shapes — the words are gone as text and only exist as paths. You can reshape them, but not retype them.
Do I need Illustrator to edit an SVG?
No. A browser-based editor handles everyday SVG editing, and Inkscape is a free desktop option. Illustrator is only necessary for advanced illustration and print work.
Will editing an SVG reduce its quality?
No. SVG is vector — it stores instructions rather than pixels, so editing and rescaling it never degrades quality the way editing a JPG does.