How to Edit an SVG (and Why a Clean One Is So Much Easier)

There are two ways to edit an SVG. You can open it in a visual editor and click shapes to recolor, resize, or move them, or you can open the code and change it by hand, because an SVG is really just a text file. Most people want the first route, usually to swap a color or resize an icon, and a visual editor handles that in seconds.

The part no tutorial mentions: how easy any of this is depends on how the SVG was made. A clean file with a few tidy shapes edits in seconds. A messy one, the kind a quick converter spits out, can carry thousands of stray points and a single color split into hundreds of slivers, and then "just click the shape and recolor it" stops working. This guide covers both editing methods, and how to tell which kind of file you're holding.

The quick version

• Two ways to edit: visually in an editor (recolor, resize, reshape) or directly in the SVG code (it's just text).
• Free visual editor: Inkscape. Pro: Illustrator. In the browser: Figma or a free online SVG editor. Code: VS Code or any text editor.
• The usual job, recoloring: select a shape, change its fill. Quick on a clean file, painful on a fragmented one.
• Edit the code when you need to keep class names and IDs intact, change the viewBox, or make a fast tweak without opening an app.
• If you can't select the shape you want, the file is the problem, not the editor. A cleaner conversion is often the real fix.

First, what's actually inside an SVG

An SVG is editable because of what it is: a set of shapes described as math, written in plain text (specifically XML). A circle is stored as a center and a radius, a logo as a series of paths, each with its own fill color. (Here's the longer version if vectors are new to you.)

That's why you can recolor or resize one without it ever going blurry, and why it opens to two completely different kinds of editing. Open it in a visual editor and you work with the shapes. Open it in a text editor and you work with the code that describes them. Same file, two doors in.

Check one thing before anything else: open the SVG and try to click a single shape. If you can select and move it on its own, it's a real, editable vector. If the whole thing selects as one block and pixelates when you zoom in, it's probably a raster image wrapped in an .svg file, a "fake" vector you can't really edit. No editor fixes that; the file has to be converted properly first.

The two ways to edit an SVG, and when to use each

You want to…	Best method
Recolor, resize, or move shapes	Visual editor (Inkscape, Illustrator, Figma)
Edit text or swap a few colors fast	Visual editor, or the code for one-offs
Keep class names / IDs for CSS or animation	Edit the code directly
Change the viewBox, dimensions, or a hex value	Edit the code directly
Redraw or reshape paths by hand	Visual editor

Most editing is visual. You reach for the code when you're a developer who needs the markup to stay exactly as written, which a visual editor won't always respect (more on that below).

Editing an SVG visually

This is the route most people want, and it covers recoloring, resizing, reshaping, and deleting parts.

Pick an editor

• Inkscape is free, open-source, and runs on Mac, Windows, and Linux. It's the usual answer to "what do I edit SVGs with," and it earns it.
• Adobe Illustrator is the paid professional standard, and gives you the most control if you already have it.
• Figma runs in your browser and handles light edits and recoloring well, which is why a lot of product teams reach for it.
• Free online editors like Boxy SVG, or a quick web SVG editor, cover small changes without installing anything.

Make the edit

The steps are the same in any of them:

1. Open the file in your editor (File → Open, or drag it in).
2. Ungroup if needed. Converted and exported SVGs often arrive as one locked group. Select all and Ungroup (in Illustrator and Inkscape) so you can reach individual shapes.
3. Select the shape you want with the selection or direct-selection tool.
4. Change it. Set a new fill color, drag a handle to resize, move it, edit the text, or delete a part you don't need.
5. Save or export as SVG when you're done.

The most common edit: changing colors

Most "how do I edit an SVG" questions are really "how do I recolor this." On a clean file it's quick: click the shape, pick a new fill, done. Each color is its own editable shape, so turning your brand blue into green is one click per shape.

This is also exactly where a messy file falls apart, which is the next section.

Editing the SVG code directly

Because an SVG is text, you can open it in VS Code, Notepad, or any text editor and change it by hand. This is the developer's route, and for some jobs it's faster and safer than any visual app:

• Recoloring: find the shape's fill="#3b82f6" and change the hex value.
• Resizing the canvas: edit the width, height, or viewBox.
• Keeping your hooks intact: this is the big one. Visual editors like Illustrator often rewrite the markup when they save, renaming or stripping the class and id attributes your CSS or JavaScript depends on. If your SVG is wired up for styling or animation, editing the code by hand is the only reliable way to keep those hooks.

The tradeoff is simple: code editing is great for small, surgical changes and anything touching classes, IDs, or animation. It's the wrong tool for reshaping a curve or recoloring a busy illustration. That's what the visual editors are for.

Why some SVGs are a nightmare to edit (and how to fix it)

Here's what no tool page tells you: the editor is rarely the problem. The file is.

Open a clean SVG and editing is calm. There are a handful of named shapes, one fill per shape, and a low node count, so you click exactly what you mean and recolor it in a second.

Open a messy one, usually something a fast free converter auto-traced, and the same edit turns miserable:

• A single color gets split into hundreds of tiny slivers, so there's no single "blue shape" to click. There are hundreds of them.
• Smooth curves are stuffed with thousands of anchor points, so reshaping anything is hopeless and the editor lags. (This is the too-many-nodes problem in full.)
• Stray background rectangles and clipped edges get in the way.

When you hit this, the fix usually isn't a better editor or more patience. It's a cleaner starting file. Re-converting the original image into a tidy SVG gives you something you can actually edit.

What this looks like with PerfectVector

The easiest SVG to edit is a clean one, and that's the part PerfectVector is built to get right. It rebuilds your image as clean paths with a low node count and keeps each color as its own editable shape, so when you open the result in Illustrator, Figma, or Inkscape, you can select and recolor things the way the tutorials assume you can.

It also has a built-in color editor, so you can recolor or merge colors right after converting, by color instead of by hunting down individual paths. Fewer colors means fewer shapes to manage and a file that's simpler to edit downstream. You can convert an image into a clean, editable SVG and check the paths yourself. Convert your first images free, no credit card required.

Recolor by color, not by path

A quick checklist before you edit

• Confirm it's a real vector. Click a single shape. If it selects on its own, you're set. If the whole image selects as one block and blurs when zoomed, convert it to a real SVG first.
• Keep the original. Save a copy before you start, especially if you'll touch the code.
• Pick the method. Visual editor for shapes and colors; code for classes, IDs, viewBox, and small tweaks.
• Ungroup if the file arrives as one locked group.
• If you can't select what you want, stop fighting it. The file is too fragmented, and a cleaner conversion will save you more time than manual cleanup.

FAQ

How do I edit an SVG for free? Use Inkscape, a free, open-source editor for Mac, Windows, and Linux, for full visual editing. For quick changes, use a free online SVG editor in your browser, or open the file in a text editor like VS Code and change the code directly. All three cost nothing.

How do I change the color of an SVG? In a visual editor, select the shape and set a new fill color. In the code, find the shape's fill value (like fill="#3b82f6") and change the hex. If one color is split across many shapes, recolor by color instead of clicking each piece, using a tool that groups colors for you.

Can I edit an SVG in VS Code? Yes. An SVG is XML text, so VS Code or any text editor opens it fine. It's the right route for changing hex colors, the viewBox, or dimensions, and for keeping class and id attributes intact for CSS or animation. It's not suited to reshaping curves by hand.

Why can't I select individual shapes in my SVG? Usually one of two reasons. The shapes are grouped, so select all and ungroup first. Or the file is a raster image wrapped in an .svg, which has no separate shapes to select. If it pixelates when you zoom in, it's the second case, and you'll need to convert it into a real vector.

Can I edit an SVG in Canva? Yes, for basic edits. Canva lets you recolor, resize, and reposition an SVG, which covers most light needs. For precise path editing, ungrouping complex shapes, or code-level changes, use Inkscape, Illustrator, or a text editor.

How do I edit an SVG on Windows or Mac? The same tools work on both. Inkscape runs on Windows, Mac, and Linux; Figma and online editors run in any browser; VS Code edits the code on either. You don't need different software for different operating systems.

---

Editing goes smoothly when the file is clean to begin with. If yours is a tangle of stray paths, convert the original into a clean, editable SVG and start from something you can actually work with.