> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# How to Edit an SVG File: Visual Editor or Code

> Edit SVG shapes in a visual editor or change the code. Diagnose groups, paths, and embedded images, then check colors, canvas size, and the saved result.

Source: https://perfectvector.com/blog/how-to-edit-an-svg

Language: en
Author: Irene Kim
Published: 2026-05-30T08:00:00+09:00
Updated: 2026-10-08T08:00:00+09:00

To edit an SVG file, open a copy in a **visual editor** for changes to shapes, colors, and curves, or in a **text editor** for small changes to its markup. Save as SVG, then reopen the saved file to check the result. The right method depends on the edit you need and the objects inside the file.

Before choosing a more destructive command, identify what you selected. A group, one path with several parts, and an embedded PNG can all look like a single object on the canvas. Each needs a different fix.

> **Choose the editing route**
>
> * **Colors, size, movement, and curves:** use Inkscape, Illustrator, or a compatible browser vector editor.
> * **IDs, classes, a hex color, or the canvas:** edit a copy of the SVG code and check its rendering.
> * **Everything selects together:** inspect the object type; use Ungroup only for an actual group.
> * **Only have raster artwork:** vectorize the source, compare the preview, then unlock the PerfectVector result before editing and export.

## Prepare a copy and identify the SVG objects

You need the SVG file, a working copy, an editor, and an SVG-capable viewer. Keep the original until the exported copy has passed your checks.

[SVG means Scalable Vector Graphics](https://www.w3.org/TR/SVG2/). Its XML markup can describe vector shapes and paths, but it can also contain embedded images. A **path** describes a line or shape; a **node** is an editable point along that path in a vector editor. An SVG extension alone does not tell you whether the visible artwork exposes those points.

Open the copy and inspect the selected object in the Layers or Objects panel. If necessary, look at the markup in a text editor. Match the object type before changing its structure:

| Selected content                      | What to inspect                                    | First action                                                                 |
| ------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
| Group                                 | A group container, often `<g>` in the code         | Enter the group, or ungroup once; repeat only for nested groups              |
| Path with disconnected parts or holes | One path containing several subpaths               | Edit its nodes; break apart on a duplicate only if separate parts are needed |
| One continuous path                   | Editable nodes along the contour                   | Use the node or direct-selection tool                                        |
| Clipped or masked artwork             | A clip or mask plus its contents                   | Inspect the contents before releasing the boundary                           |
| Embedded PNG or JPEG                  | An image object; `<image>` referencing raster data | Edit the raster source, or vectorize it if you need paths                    |

The [`<image>` element can reference PNG or JPEG content](https://www.w3.org/TR/SVG2/embedded.html). Those pixels do not become paths because the outer file ends in `.svg`. Blocky edges when enlarged are a clue; the object panel and source reference provide a more specific diagnosis. Some editors also insert a valid vector SVG as one graphic object, so a single selection alone proves very little.

A compound path can preserve holes, such as the middle of an “O.” Breaking it apart may change those holes. Use the [SVG object-type diagnosis](https://perfectvector.com/blog/svg-wont-ungroup) when Ungroup is unavailable or has no effect.

## Choose a visual editor or code

| Your edit                   | Useful method                              | What to check afterward                                      |
| --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
| Recolor or move a shape     | Visual editor                              | Only the intended objects changed                            |
| Reshape a contour           | Node or direct-selection tool              | Curves, corners, and holes still match the design            |
| Change one known fill value | Text editor                                | The visible paint changed; another style did not override it |
| Keep CSS or animation hooks | Text editor                                | Required IDs and classes remain in the saved markup          |
| Remove extra canvas margins | Fit the page/artboard, or adjust `viewBox` | No artwork, stroke, or effect is cropped                     |
| Prepare separate cut layers | Destination-specific workflow              | Geometry and imported layers work in the cutting app         |

[Inkscape is free and open source](https://inkscape.org/about/), runs on macOS, Windows, and Linux, and uses SVG as its main format. Illustrator is another option if it is already part of your workflow. Figma can move assets between design tools as SVG, though its [import guidance excludes SVG marker and pattern elements](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools). Check a complex import before committing to an editor.

Canva's documented [SVG editor workflow](https://www.canva.com/features/svg-editor/) covers basic color and layout edits. Browser editors can suit smaller jobs. Check support for your file's fills, strokes, text, and effects, along with current export terms. For the narrower task of splitting supported solid fills into aligned files by exact color, use the [SVG Color Separator](https://perfectvector.com/svg-color-separator); use a vector editor when you need to reshape paths.

## Edit shapes visually, then verify the export

Command names vary by editor, but the job follows this order:

1. **Open the working copy.** Compare the imported design with the original. Stop if lettering, patterns, or effects have already changed.
2. **Select the intended object.** Enter a group or ungroup it only when the panel identifies a group. If it is a path, switch to the node or direct-selection tool.
3. **Make one edit.** Change a fill, move a part, or adjust a few nodes. For resizing, keep the aspect ratio constrained unless stretching is deliberate.
4. **Check the changed area.** Inspect curves and small gaps at close range, then view the whole design at its intended size.
5. **Save or export a new SVG.** Reopen that file in a viewer and in the application where you will use it. Confirm the edited part, overall dimensions, and any required selectable objects.

For recoloring, distinguish **fill**, the paint inside a shape, from **stroke**, the paint along its outline. One visible color can span many objects. An editor's same-fill selection can help, but check the selection before changing it; another part may share that paint. The [SVG color-editing guide](https://perfectvector.com/blog/how-to-change-svg-color) covers inherited styles and colors that refuse to change.

Keep an editable working master when your editor uses its own format or extra metadata. Adobe's [SVG saving options](https://helpx.adobe.com/illustrator/using/saving-artwork.html) include settings for fonts, CSS properties, raster images, and Illustrator editing data. A file that looks right after export may still have different markup or rasterized content. Compare the required objects and hooks as well as the image.

## Edit the SVG code for a small, controlled change

Open the SVG copy in VS Code or another plain-text editor. Keep the namespace, element names, and quotation marks intact. Make one change and render the file before making the next.

### Try a fill change without changing the path

Save this example as `triangle.svg` and open it in an SVG-capable viewer:

```svg
<svg xmlns="http://www.w3.org/2000/svg"
     width="48" height="48" viewBox="0 0 48 48">
  <path id="triangle" class="icon-shape" fill="#3b82f6"
        d="M24 8 L40 40 H8 Z" />
</svg>
```

1. Replace `#3b82f6` with `#f97316` in the path's `fill` attribute.
2. Save and reopen or refresh the file.
3. Check that the triangle is orange and its contour is unchanged. The `d` path data, `id`, and `class` should still match the original.

If the color does not change, inspect a `style` attribute, class rule, inherited paint, or stroke that may control what you see. Change the responsible paint rule rather than replacing every occurrence of a color throughout the file.

Method note: We rendered this example before and after the fill change with an SVG renderer and checked the resulting pixels. The triangle changed color while its path data, ID, and class stayed the same. This small example does not test a complex SVG's import or export in a design app.

### Remove blank margins with the `viewBox`

The root [`viewBox` has four numbers: minimum x, minimum y, width, and height](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute). They define the rectangle in the SVG's coordinate space mapped into its displayed viewport.

In the example, the triangle occupies x=8 through 40 and y=8 through 40. Change `viewBox="0 0 48 48"` to `viewBox="8 8 32 32"`, leaving the path data untouched. Save and render again. The triangle now fills more of the same 48-by-48 viewport because the blank margins have been removed.

That edit changes the canvas mapping, not the path geometry or the root `width` and `height`. For real artwork, allow space for strokes and effects; a tight geometry box can crop them. The safer visual option is often to fit the page or artboard to the drawing, then inspect an exported copy. If the file imports at the wrong physical size, follow the [SVG dimensions and `viewBox` guide](https://perfectvector.com/blog/svg-imports-wrong-size).

If the artwork disappears, crops, or stretches, restore the original `viewBox` and check the four values and aspect ratio. Do not “fix” a canvas problem by moving all the nodes.

## When a traced SVG needs cleanup

A raster image stores pixels on a grid. **Vectorization** reconstructs geometry from those pixels, so a traced file may organize colors and contours differently from the original design.

One visible part may be scattered across small paths. A single color can also span several disconnected regions. Dense nodes, tiny specks, background shapes, and overlapping contours can make a simple edit slow. Inspect those specific properties instead of judging the file only by how sharp it looks at one zoom level.

**Fragmented structure**

![Illustration of fragmented vector shapes with dense anchor points](https://perfectvector.com/blog/how-to-edit-an-svg/messy-svg-editing.webp)

*Illustration: many small pieces and dense nodes make direct selection and reshaping harder.*

**Simpler structure**

![Illustration of larger vector shapes with fewer anchor points](https://perfectvector.com/blog/how-to-edit-an-svg/clean-svg-editing.webp)

*Illustration: larger shapes and a more economical node layout are easier to inspect and edit.*

These illustrations explain editing effort; they are not conversion samples or a measured product comparison. If a trace is worth keeping, repair the affected areas and simplify only where the contour remains accurate. If it came from raster artwork and cleanup would be excessive, try vectorizing the original image again. Keep usable native vector geometry rather than tracing a screenshot of it.

## What this looks like with PerfectVector

PerfectVector fits the branch where you need to create paths from raster artwork, such as an original PNG or JPEG or the raster content inside an SVG. Use the general editor methods above for existing vector artwork you want to preserve.

For your own conversion, follow this order:

1. **Upload the raster source and compare the vector preview.** Look for missing details, unwanted regions, and contours that differ from the source.
2. **Unlock the result before editing or export.** Conversion and preview are free and unlimited; the [current public pricing policy](https://perfectvector.com/pricing.md) states that one credit unlocks each unique result and re-downloading an unlocked result is free.
3. **Inspect and edit the unlocked geometry.** Check the shapes and nodes you need, adjust the palette where useful, and compare the edited result at the intended size.
4. **Export and verify in your next application.** Reopen the SVG, select the intended parts, and check dimensions and small details. A preview alone does not establish that a file is ready for every editor, printer, or cutter.

Raster lettering is reconstructed as geometry, so do not expect it to become editable typed text. Keep manual correction or redrawing available when an important letter, curve, or small gap does not survive the trace.

## FAQ

**How do I edit an SVG for free?**
Use Inkscape for visual editing or a plain-text editor for markup changes. Browser tools may also offer free features; check their current export terms and whether they support the SVG features your file uses.

**Can I edit an SVG in VS Code?**
Yes. Edit its XML markup for a small fill change, dimensions, viewBox, or required IDs and classes. Save a copy and render it afterward. Use a visual editor for curve reshaping.

**Why can't I select individual shapes in my SVG?**
Inspect the object type. It may be a group, one path with several subpaths, clipped artwork, or an embedded image. Enter or ungroup a real group; edit path nodes for geometry; vectorize raster content only when you need paths.

**Can I edit an SVG in Canva?**
Canva's documented SVG workflow covers basic color and layout edits. Check the imported file and current SVG download terms. Use a vector editor or the markup when you need precise contour changes or control over IDs and classes.

**Can I edit a PerfectVector result before unlocking it?**
For your own conversion, compare the preview first, then unlock the result before using its editing and export controls. Inspect the exported SVG in the application where it will be used.

## Sources

1. [W3C — Scalable Vector Graphics (SVG) 2](https://www.w3.org/TR/SVG2/) — SVG's document, shapes, paths, and styling model.
2. [W3C — SVG Embedded Content](https://www.w3.org/TR/SVG2/embedded.html) — raster images can remain embedded inside an SVG document.
3. [W3C — SVG coordinate systems, transformations, and units](https://www.w3.org/TR/SVG2/coords.html) — viewBox mapping and the distinction between geometry and viewport dimensions.
4. [Inkscape — About](https://inkscape.org/about/) — official editor platform, SVG-format, and open-source information.
5. [Adobe — How to save artwork in Illustrator](https://helpx.adobe.com/illustrator/using/saving-artwork.html) — SVG export settings and retained Illustrator editing data.
6. [Figma — Copy assets between design tools](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools) — SVG transfer workflow and marker/pattern import limits.
7. [Canva — SVG Editor](https://www.canva.com/features/svg-editor/) — documented basic color, resizing, and layout workflow.
8. [PerfectVector — Pricing policy](https://perfectvector.com/pricing.md) — current preview, result-unlock, and re-download terms.

***

Keep a usable SVG and edit its existing geometry. If your source is raster or its trace needs replacing, [try your original image in PerfectVector](https://perfectvector.com/image-to-vector), compare the preview with the source, unlock before editing, and inspect the exported shapes and dimensions in your next application.

## Explore

- [Read the HTML article](https://perfectvector.com/blog/how-to-edit-an-svg)
- [SVG Bounding Boxes: Measure the Right Coordinates](https://perfectvector.com/blog/svg-bounding-box.md)
- [SVG Pattern Units: Keep Repeated Motifs the Right Size](https://perfectvector.com/blog/svg-pattern-units.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)