How to Edit an SVG File: Visual Editor or Code

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 the markup by hand. Most people want the first route, usually to swap a color or resize an icon. Code editing is useful when you need to preserve IDs and classes or adjust the canvas precisely.

How easy the edit will be depends on how the SVG was made. A file with a few well-organized shapes is straightforward. A grouped file may only need ungrouping, while an embedded raster or a heavily fragmented trace needs a different fix. This guide covers both editing methods and shows how to identify the file you have before changing it.

The quick version

• Two ways to edit: visually in an editor (recolor, resize, reshape) or directly in the SVG code (it's just text).
• Desktop editor: Inkscape or Illustrator. In the browser: Figma or an online SVG editor. Code: VS Code or any text editor.
• Need separate cut layers, not general path editing: use the free SVG Color Separator for a supported solid-fill SVG.
• 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: try entering or ungrouping the group first. Reconvert only when the content is an embedded raster or an unusably fragmented trace.

First, what's actually inside an SVG

An SVG is editable because of what it is: a set of graphical elements and paths serialized as text. The SVG 2 specification defines elements such as circles, paths, fills, and transforms in an XML-based document.

Vector shapes can be recolored or resized without pixelation, and the same file supports two 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 markup that describes them.

Check one thing before anything else: open the SVG and try to select a single shape. If the whole design selects as one block, enter the group or use Ungroup before drawing a conclusion. If it still behaves as one image and pixelates when you zoom in, it is probably a raster image embedded inside the SVG. The specification permits PNG and JPEG files inside an <image> element, but those pixels do not become editable vector paths. Start again from the original raster and vectorize it when separate shapes are required.

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
Remove extra canvas whitespace	Fit the page/artboard to the artwork, or edit the viewBox carefully
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 a free, open-source vector editor for macOS, Windows, and Linux, with SVG as its main format.
• Adobe Illustrator supports visual path editing and detailed SVG save/export options; use it when it is already part of your workflow.
• Figma imports and exports SVG for cross-tool workflows, although its support page notes that some SVG marker and pattern elements are not included on import. Its raster-to-vector feature is covered separately.
• Browser-based SVG editors can cover small changes without installing anything; features, pricing, and export terms vary by product. For Boxy SVG, see choosing its Vectorize generator or an imported trace.
• PerfectVector's SVG Color Separator handles a narrower browser job: it splits a supported solid-fill SVG into aligned files by exact color. It does not reshape paths or merge similar shades, so use a vector editor for general changes.

LibreOffice Draw can hold an inserted SVG as one graphic object even when it contains vector shapes. On a copy, use Shape → Break to expose drawing objects, then test a fill and a contour before adapting the whole design. The LibreOffice Draw SVG editing workflow explains that step, how it differs from Ungroup, and why an ODG working master should be kept separately from the exported SVG.

Make the edit

The sequence is similar across editors, although the command names differ:

1. Open the file in your editor (File → Open, or drag it in).
2. Enter or ungroup the object if needed. An SVG may open as one group even when it contains separate vector shapes. Double-click to enter the group or use Ungroup, depending on the editor. If Ungroup is unavailable or changes nothing, use the SVG object-type diagnosis before trying a more destructive path command.
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." When the artwork is organized into sensible shapes, select the shape or shapes carrying that color and change the fill. If a color appears across several shapes, use the editor's same-fill or palette selection rather than assuming one swatch always maps to one object. Recoloring has enough of its own failure cases that we wrote a dedicated guide to changing an SVG's colors.

Fragmented files need a different approach.

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: visual editors may rewrite SVG markup during save or export. Adobe's SVG saving options include choices that affect IDs, styling, fonts, and rasterization. If CSS or JavaScript depends on exact class or id values, compare the exported markup or edit a copy in code rather than assuming round-trip preservation.

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.

When the text changes after opening or saving, diagnose the SVG font change before outlining or replacing the lettering.

Remove extra canvas space without moving the artwork

Extra whitespace around an SVG usually means its canvas is larger than the visible artwork. The root viewBox contains four numbers: minimum x, minimum y, width, and height. Together they define the rectangle mapped into the SVG viewport.

The safest visual fix is to fit the page or artboard to the drawing or selection, then export a copy. In code, adjust the four viewBox numbers only after saving a backup. That changes the visible canvas and scale mapping; it does not rewrite the path data, so an incorrect value can crop the artwork or introduce unwanted scaling. If the problem is the file importing at the wrong physical size rather than blank margins, use the separate guide to SVG dimensions and viewBox behavior.

Why some SVGs are hard to edit (and how to fix them)

Editing effort depends heavily on the structure of the file. A simple SVG may contain a small set of shapes with manageable paths. A heavily fragmented auto-trace can turn the same edit into manual cleanup:

• One visible color may be split across many small pieces, so there is no single "blue shape" to select.
• Smooth curves may contain far more anchor points than the edit needs, which makes reshaping slower and less predictable.
• Stray background rectangles and clipped edges get in the way.

If the fragmentation came from tracing a raster and you still have the original image, retracing it may be faster than repairing every path. If the SVG was drawn natively, simplify only where the shape remains accurate or redraw the affected part; reconverting a screenshot of the SVG would discard useful vector information.

What this looks like with PerfectVector

PerfectVector belongs before the general editing step when your only source is a PNG, JPEG, or another supported raster format, or when an SVG contains an embedded raster. It is not a general-purpose SVG editor. It rebuilds raster artwork as editable paths, and the preview lets you decide whether the shapes, curves, and node layout fit the specific job.

The built-in editor lets you inspect shapes and nodes, recolor matching fills from the palette, and simplify the palette before export. Vectorizing and previewing are free and unlimited; one credit unlocks the finished SVG download, and an unlocked result can be downloaded again without another credit. Check the current offer details before a production project.

A quick checklist before you edit

• Confirm the object type. If the whole design selects at once, enter the group or ungroup it. If it remains one image and blurs when zoomed, vectorize the original raster when you need editable paths.
• 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.
• Enter or ungroup the object if the file opens as one group.
• Choose the least destructive fix. Ungroup first, simplify only where the shape stays accurate, and retrace only when the source is raster or the existing trace is not worth repairing.

FAQ

How do I edit an SVG for free? Use Inkscape, a free and open-source editor for macOS, Windows, and Linux, for visual editing, or inspect the XML in a text editor such as VS Code. Some browser editors also offer free features, but check their current export limits and terms.

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.

Sources

1. W3C — Scalable Vector Graphics (SVG) 2 — SVG's document, shape, path, styling, and transformation model.
2. W3C — SVG coordinate systems, transformations, and units — the four-value viewBox model used in the canvas-whitespace fix.
3. Adobe — How to save artwork in Illustrator — current SVG save options and round-trip/rasterization caveats.
4. Figma — Copy assets between design tools — SVG import/export workflow and unsupported marker/pattern behavior.
5. Canva — SVG Editor — documented basic recoloring, resizing, rotation, cropping, and SVG download workflow.
6. Inkscape — About — official platform and open-source status for the recommended free editor.

---

If your file only needs ungrouping, keep its original vector data and edit that. If the source is raster or the trace is too fragmented to repair, run the original image through PerfectVector, inspect individual shapes and nodes in the preview, and unlock the SVG only when the structure fits your next editor or production tool.