Is the SVG editor free?

Yes. Opening the editor, editing and exporting cost nothing. Credits are only consumed when the AI generates new artwork for you.

Do I need to sign up to edit an SVG?

No. The editor opens without an account. Signing in gives you the dashboard: credits for AI generation, the optimiser, and a workspace that keeps the designs you generate. Edits made in the editor are not saved to the server, so download the file to keep them.

Do I need to install anything?

No. It runs in the browser. There is no plugin, no desktop application and no font or extension to add.

Can I open an SVG I already have?

Yes, by pasting its markup. Open the .svg in any text editor, copy everything, and paste it into the code panel; the canvas renders it straight away. There is no file picker or drag-and-drop yet, so pasting is the only way in. It does not have to have been generated here.

Does it open files exported from Figma, Illustrator or Inkscape?

Yes, as markup. All three export standard SVG, so copy the exported file's code into the code panel. Inkscape files carry extra sodipodi and inkscape attributes; they are harmless here, and the optimiser in the dashboard or SVGO will strip them before you ship.

Can I edit the SVG code directly?

Yes — the code panel sits beside the canvas and is editable both ways. Type a new path string and the drawing updates; move or resize a shape and its attributes update in the code. The status bar also tells you whether the XML is valid.

Can I edit individual paths and nodes?

Not visually. There are no draggable anchor points or bezier handles; a path is edited by changing its d attribute in the code panel, and the canvas redraws as you type. For node-by-node drawing, use Inkscape or Figma and paste the result here.

Can I crop or resize an SVG?

Yes, by editing the viewBox in the code panel. Changing its size reframes the drawing, and changing its origin crops it — neither resamples anything or costs you quality. The export writes width and height to match the viewBox.

Does it handle gradients and filters?

Gradients and filters in the file are kept as they are, render on the canvas and survive export. Edit them in the code panel; there is a guide to writing filters by hand in the journal.

A .svg file, a PNG up to 1024 px on the long edge, a base64 data URI, or the markup as a React component with its stroke, font and class attributes converted to JSX spellings. Binding fill and stroke to props is a short edit you add afterwards.

Not automatically. Edits stay in the browser tab, so press ⌘S or Ctrl+S, or use Download, to keep the file. Designs you generate with AI are saved to your workspace, and you can open them in the editor from the dashboard.

Free online SVG editor

An online SVG editor with the canvas and the code in one window.

Move a shape and watch its coordinates change. Retype a number and watch the shape move. An editor that never hides the file it is producing — which turns out to be the fastest way to learn SVG as well as the fastest way to fix it.

Nothing to install · no account needed to start drawing · editing and export are free

Open the editor Generate something to edit

VHRCNTI

code

<g id="stem">
  <path
    d="M28 30
       C 40 18,
         60 20,
         70 64"
    stroke="#F25C05"
    fill="none"/>
</g>

Four steps

How to edit an SVG file online.

No download, no licence, no waiting for a 900 MB installer to finish so you can change one colour.

01
Open the editor
It loads in the browser with nothing to install and no account to create, on a starter drawing. Paste your own SVG markup into the code panel to replace it.
02
Select what you want to change
Click any shape on the canvas, or pick it by id from the layer list. Outline view draws a hairline around everything, which is how you locate the parts you cannot see.
03
Edit on the canvas or in the code
Recolour a fill, change a stroke, move or resize a shape, set a transform — or retype attributes and path strings in the code panel. The canvas and the code stay in step.
04
Export the file
Download the .svg or a PNG, copy a data URI, or copy the markup out as a React component.

Tool reference

Eleven tools. One key each.

keyboard-first by design

Selection

V
Select
Click a shape to select it and drag to move it. Rectangles, circles and ellipses get resize handles.
H
Hand / pan
Move the canvas without moving what is on it.

Shapes

R
Rectangle
Click to drop a rect, then size it with the handles or the inspector.
C
Circle
A true circle element, with centre and radius in the inspector.
E
Ellipse
Independent rx and ry, editable in the inspector.
P
Polygon
Drops a regular hexagon. Change its points in the code panel.
S
Star
Drops a five-point star as a polygon. Reshape it in the code panel.

Drawing

L
Line
A single segment, with both endpoints editable in the inspector.
N
Path
Drops one curved path to start from. Reshape it by editing its d string in the code panel.
T
Text
Live text with editable content and size. It stays text; there is no outline conversion.

Inspect

I
Eyedropper
Click a shape to copy its fill colour to the clipboard.

Ways to look at a file

Four views, for four different problems.

Select mode

Every drawable node is highlighted as you pass over it. Useful on a pasted-in file where you cannot tell what belongs to which group.

Outline view

Draws a hairline around every node regardless of fill. This is how you find the invisible rectangle someone left behind the artwork.

Code panel

The markup alongside the canvas, editable both ways. Move a shape and its numbers change; retype a number and the shape moves. It also searches, formats, and says whether the XML is valid.

Layer tree

Every element by tag and id, with lock and drag-to-reorder. Anything without an id is given one, so each part is addressable; rename ids in the code panel and they carry into the export.

Who it is for

Four people open an SVG editor for four different reasons.

The tools are the same. Which panel you live in is not.

Developers
You want the markup, not a canvas. The code panel is the primary surface here: read the path data, fix the viewBox, strip the junk an export tool left behind, then copy it out as a component.
SVG to React
Designers
You want a file that arrives in Figma with its structure intact. Give the parts real ids in the code panel and they survive the paste, so the layer panel on the other side is not forty copies of Vector.
SVG for Figma
Crafters
You want cut lines a machine will read. Delete the stray shapes, check the element count in the status bar, and make sure each piece is a filled shape rather than a stroke, so Design Space gets something it can cut cleanly.
Cricut SVG
People learning SVG
You want to see what a change does. Move one shape and watch its numbers change, or change one number in a path string and watch the drawing move — which teaches the format faster than any article about it, including ours.
Start with the viewBox

Background

What is an SVG file?

Scalable Vector Graphics is a drawing described as text. Where a PNG stores a grid of coloured pixels, an SVG stores instructions — start here, curve to there, fill it with this colour — in XML you can open in any text editor and read.

Two things follow from that. Nothing in the file has a resolution, so the same drawing is sharp on a favicon and on a vinyl banner. And because it is markup rather than an opaque binary, it can be searched, diffed in version control, styled with CSS, animated, and edited by hand when a tool gets it wrong.

That last point is what most editors take away from you. They take the file in, hide the markup behind a canvas, and hand back something that no longer resembles what you gave them. Keeping the code panel open is the difference between editing an SVG and editing a picture of one.

What it costs

Nothing

Editing and exporting are free and unmetered, and the optimiser is free with an account. Credits exist for one thing only: asking the model to make new artwork.

Draw and editFree
Paste in an existing SVGFree
Optimise (free account)Free
Export .svg / PNG / ReactFree
Generate from a prompt1 credit
Premium fidelity generation2 credits

Questions

Editing SVG online, answered.

Cost, sign-up, bringing in your own files, the code panel, and what comes out the other end.

Is the SVG editor free?: Yes. Opening the editor, editing and exporting cost nothing. Credits are only consumed when the AI generates new artwork for you.
Do I need to sign up to edit an SVG?: No. The editor opens without an account. Signing in gives you the dashboard: credits for AI generation, the optimiser, and a workspace that keeps the designs you generate. Edits made in the editor are not saved to the server, so download the file to keep them.
Do I need to install anything?: No. It runs in the browser. There is no plugin, no desktop application and no font or extension to add.
Can I open an SVG I already have?: Yes, by pasting its markup. Open the .svg in any text editor, copy everything, and paste it into the code panel; the canvas renders it straight away. There is no file picker or drag-and-drop yet, so pasting is the only way in. It does not have to have been generated here.
Does it open files exported from Figma, Illustrator or Inkscape?: Yes, as markup. All three export standard SVG, so copy the exported file's code into the code panel. Inkscape files carry extra sodipodi and inkscape attributes; they are harmless here, and the optimiser in the dashboard or SVGO will strip them before you ship.
Can I edit the SVG code directly?: Yes — the code panel sits beside the canvas and is editable both ways. Type a new path string and the drawing updates; move or resize a shape and its attributes update in the code. The status bar also tells you whether the XML is valid.
Can I edit individual paths and nodes?: Not visually. There are no draggable anchor points or bezier handles; a path is edited by changing its d attribute in the code panel, and the canvas redraws as you type. For node-by-node drawing, use Inkscape or Figma and paste the result here.
Can I crop or resize an SVG?: Yes, by editing the viewBox in the code panel. Changing its size reframes the drawing, and changing its origin crops it — neither resamples anything or costs you quality. The export writes width and height to match the viewBox.
Does it handle gradients and filters?: Gradients and filters in the file are kept as they are, render on the canvas and survive export. Edit them in the code panel; there is a guide to writing filters by hand in the journal.
What can I export?: A .svg file, a PNG up to 1024 px on the long edge, a base64 data URI, or the markup as a React component with its stroke, font and class attributes converted to JSX spellings. Binding fill and stroke to props is a short edit you add afterwards.
Is my work saved?: Not automatically. Edits stay in the browser tab, so press ⌘S or Ctrl+S, or use Download, to keep the file. Designs you generate with AI are saved to your workspace, and you can open them in the editor from the dashboard.

Open a canvas. No sign-up to draw.

Open the editor

An online SVG editor with the canvas and the code in one window.

How to edit an SVG file online.

Open the editor

Select what you want to change

Edit on the canvas or in the code

Export the file