Is the SVG editor free?

Yes. Drawing, editing, optimising 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?

Not to start. Open the editor, drop a file in and work on it without an account. Signing in is what gives you somewhere to save — the workspace that keeps your files between sessions — and the credits for AI generation.

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. Bring in an existing file and edit it directly — anchors, fills, layer names and all. It does not have to have been generated here.

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

Yes. Those all emit standard SVG, and standard SVG is what this reads. Inkscape files carry extra sodipodi and inkscape attributes that other editors choke on; those are ignored rather than treated as errors, and the optimiser strips them on export.

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; drag an anchor and the string updates. That two-way binding is the reason the panel exists rather than being a read-only preview.

Can I edit individual paths and nodes?

That is what the pen and node tools are for. Click a path to expose its anchors, drag any one of them, pull a bezier handle to reshape the curve, or add and delete points outright. Nothing is baked.

Can I crop or resize an SVG?

Yes. Resizing is just the viewBox, which you can set numerically in the inspector, and cropping is the same operation with a different origin — so neither one resamples anything or costs you quality.

Does it handle gradients and filters?

Gradients defined in the file stay as editable defs. Filter primitives are preserved on export, and there is a guide to writing them by hand in the journal.

The raw .svg, or the markup copied out as a React component with the attribute names converted to their JSX spellings. Binding fill and stroke to props is a short edit you add afterwards. From there you can send a drawing on to the icon bundler.

Files you save land in your workspace and are there when you come back. You can delete individual files or clear the workspace entirely from the dashboard.

Free online SVG editor

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

Drag an anchor and watch the path string change. Rename a group and watch the ID change. A vector 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 nudge one anchor point.

01
Open the editor
It loads in the browser with nothing to install and no account to create. Start on a blank canvas or drop an existing .svg straight onto it.
02
Select what you want to change
Click any shape to expose its anchors, or find it by name in the layer tree. 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
Drag anchors, pull bezier handles, retype a path string, recolour a fill, rename a group. The canvas and the code panel stay bound to each other in both directions.
04
Export the file
Download the optimised .svg, or copy the markup out as a React component with the JSX attribute renames applied.

Tool reference

Eleven tools. One key each.

keyboard-first by design

Selection

V
Select
Click a shape, drag its anchors, marquee a group.
H
Hand / pan
Move the canvas without moving what is on it.

Shapes

R
Rectangle
Drag out a rect. Hold to constrain to a square.
C
Circle
A true circle element, not a four-point approximation.
E
Ellipse
Independent rx and ry, editable in the inspector.
P
Polygon
Regular polygon with an adjustable side count.
S
Star
Inner and outer radius, point count, in one shape.

Drawing

L
Line
A single segment with real endpoints.
N
Path pen
Click for corners, drag for curves. The bezier tool.
T
Text
Live text you can later flatten to outlines.

Inspect

I
Eyedropper
Lift a colour straight off the canvas.

Ways to look at a file

Four views, for four different problems.

Select mode

Every drawable node becomes hoverable, highlighted as you pass over it. Useful on an imported 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, updating as you edit. Change something on the canvas, watch the path string change — that feedback is the whole point.

Layer tree

Groups and IDs in a panel you can rename and reorder. Names carry into the exported file, so tidy here means tidy in the repo.

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. Name the groups here and those names 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. Separate the colours onto their own layers, delete the stray shapes, check the node count, and Design Space gets something it can cut cleanly.
Cricut SVG
People learning SVG
You want to see what a change does. Drag one anchor and watch a single number in the path string 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 import the file, 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

Drawing, editing, optimising and exporting are free and unmetered. Credits exist for one thing only: asking the model to make new artwork.

Draw and editFree
Import an existing SVGFree
OptimiseFree
Export .svg / ReactFree
Generate from a prompt1 credit
Premium fidelity generation2 credits

Questions

Editing SVG online, answered.

Cost, sign-up, imported files, the code panel, and what comes out the other end.

Is the SVG editor free?: Yes. Drawing, editing, optimising 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?: Not to start. Open the editor, drop a file in and work on it without an account. Signing in is what gives you somewhere to save — the workspace that keeps your files between sessions — and the credits for AI generation.
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. Bring in an existing file and edit it directly — anchors, fills, layer names and all. It does not have to have been generated here.
Does it open files exported from Figma, Illustrator or Inkscape?: Yes. Those all emit standard SVG, and standard SVG is what this reads. Inkscape files carry extra sodipodi and inkscape attributes that other editors choke on; those are ignored rather than treated as errors, and the optimiser strips them on export.
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; drag an anchor and the string updates. That two-way binding is the reason the panel exists rather than being a read-only preview.
Can I edit individual paths and nodes?: That is what the pen and node tools are for. Click a path to expose its anchors, drag any one of them, pull a bezier handle to reshape the curve, or add and delete points outright. Nothing is baked.
Can I crop or resize an SVG?: Yes. Resizing is just the viewBox, which you can set numerically in the inspector, and cropping is the same operation with a different origin — so neither one resamples anything or costs you quality.
Does it handle gradients and filters?: Gradients defined in the file stay as editable defs. Filter primitives are preserved on export, and there is a guide to writing them by hand in the journal.
What can I export?: The raw .svg, or the markup copied out as a React component with the attribute names converted to their JSX spellings. Binding fill and stroke to props is a short edit you add afterwards. From there you can send a drawing on to the icon bundler.
Is my work saved?: Files you save land in your workspace and are there when you come back. You can delete individual files or clear the workspace entirely 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