How-to guide

How to edit an SVG file

Open, change, and re-save an SVG — in a design tool or in plain text.

An SVG is both a picture and a text file, which means there are two completely valid ways to edit one. This guide covers both, and what to do when the SVG you were given turns out not to be editable at all.

Try the playground free →

What you need

  • ▸An SVG file (or an image you can convert to SVG first)
  • ▸A vector editor such as Figma, Illustrator, Inkscape, or Affinity Designer
  • ▸Optional: any text editor, for quick colour and size changes

Steps

  1. 01
    Check that it is really a vector

    Open the SVG in a text editor. If you see path, polygon, circle, or rect elements, it is genuinely editable. If you see a single image element with a long base64 string, it is a raster file in an SVG wrapper — trace it in VectorDrop first to get real paths.

  2. 02
    Open it in a vector editor

    Drag the SVG into Figma, or use File → Open in Illustrator, Inkscape, or Affinity Designer. All of them read standard SVG natively.

  3. 03
    Ungroup and select shapes

    SVG paths usually arrive grouped. Ungroup once or twice, then click individual paths to select them. In Figma this is Enter to drill into a group.

  4. 04
    Change colours, paths, and size

    Edit fills and strokes as you would any vector shape. Use the pen or node tool to move individual points. Because it is vector, resizing never degrades quality.

  5. 05
    Or edit the markup directly

    For simple changes, editing the text is faster: change fill="#000000" to your colour, adjust the width and height attributes, or edit the viewBox to crop. Save and reopen to see the result.

  6. 06
    Export or save

    Save back out as SVG. In Figma, select the frame and use Export → SVG. Keep 'include id attributes' off for smaller files.

Tips

  • ▸If every shape selects as one object, ungroup again — SVGs often nest groups several levels deep
  • ▸Replace hardcoded fills with fill="currentColor" to let CSS control the colour on the web
  • ▸Fewer nodes means an easier edit — trace at a lower detail setting if the paths feel unmanageable
  • ▸Always keep an untouched copy before you start editing the markup by hand

Frequently asked questions

Can I edit an SVG without design software?

Yes. SVG is XML, so any text editor can change colours, dimensions, and the viewBox. For reshaping paths, a vector editor is far more practical.

Why can't I select individual shapes in my SVG?

Either the shapes are nested inside groups (ungroup again), or the file is a raster image wrapped in SVG. In the second case, convert the original image in VectorDrop to get real, selectable paths.

Does editing an SVG lose quality?

No. SVG stores mathematical shapes, not pixels, so it can be edited and resized indefinitely without degradation.

Ready to vectorise your image?

Upload a PNG, JPG, or WebP and get a clean SVG in seconds. Free and browser-based.

Open the playground →