Open an SVG and its code appears beside the picture it draws. Click a shape to change its colours, move it, reorder it or delete it, add a rectangle, circle, line or text, or type in the code. Each side follows the other.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

How to edit an SVG here

Choose your SVG, drop it on the box, or paste SVG code. A sample drawing is already open to try things on.
Click a shape in the picture; on a phone, tap it. A dashed box marks the one selected, and the code scrolls to its line.
Change it with the controls under the picture: pick a fill or an outline colour, choose a thin, medium or thick outline, move it, bring it forward, send it back or delete it.
To put something new in, press “Rectangle”, “Circle”, “Line” or “Text” beside “Add”. It appears near the middle, on top, already selected.
Or type in the code. The picture is redrawn as you type.
Press Undo when a change was wrong, and “Download SVG” when the drawing is right.

What you can change

Fill and outline: any colour, or none at all. The outline, which SVG calls the stroke, can be thin, medium or thick: 2, 4 and 10 units in the sample, scaled to the size of your drawing. An exact width goes under “Fine-tune”.
New shapes: a rectangle, a circle or a line a quarter of the drawing’s shorter side across, or a piece of text a tenth of it high. They are written at the end of the file, which puts them on top.
Position: drag the shape, press the arrow buttons, or use the arrow keys. One press moves it about a two-hundredth of the picture: 1 unit in the sample, which is 320 units wide, and 0.1 in a 24 unit icon. Shift with an arrow key moves ten times as far.
Order: “Bring forward” and “Send back” move a shape one place among the shapes beside it; “To front” and “To back” take it all the way.
Delete: the button under the selected shape, or the Delete key. Undo brings it back.
Words: a text element that holds plain words gets a box to retype them in.
Groups: “Select the group it is in” steps out from a shape to the group round it, which then moves, reorders and deletes as one thing.
Everything else, in the code: sizes, path data, fonts, new elements.

What each change writes into the file

A move is written as a translate at the front of the element’s transform attribute. Move the sun in the sample 10 units right and its tag gains transform="translate(10 0)"; move it again and the same translate is added to, so a hundred small moves still leave one. When a shape sits in a group that is itself turned or scaled, the move is worked back through that group’s transform, so the shape goes where you dragged it and not off at an angle.

A colour from the picker is written as six-digit hex. It goes where the file already states that property: in the element’s style attribute if the property is there, otherwise in a plain fill or stroke attribute. In a file with a style sheet it always goes into the style attribute, because a rule such as .st0 { fill: red } would win over a plain attribute.

A change of order swaps the element with the next drawn element inside the same parent. In SVG, what comes later in the file is drawn on top.

Nothing else is rewritten. Every other element, comment and space is saved exactly as it was; only the opening tag of the element you changed is written afresh, on one line.

What this editor does not do

Draw freehand. There is no pen or pencil. New rectangles, circles, lines and text come from the “Add” buttons; for any other outline, draw it in the SVG path editor and paste the path into the code.
Reshape, resize or turn one shape. The points of a path and the size of a shape, a new one included, are changed in the code. To resize or turn the whole drawing, use Resize SVG or Rotate SVG.
Edit a gradient. Picking a colour for a shape filled with a gradient replaces the gradient with that colour. To change the gradient’s own colours, use Change SVG colours.
Run or fetch anything. A script in the file does not run in the picture, and a picture or font the file links to on another site is not fetched. Both are kept in the code.
Move two kinds of element: one placed by a CSS transform inside its style attribute, and one inside a nested <svg>. The editor says so when you try.

When the code has a mistake

While you type, the code will often not be valid for a moment: a tag left open, a quote missing. The picture then keeps showing the last version that read correctly, the fault is named under the code, and the download is switched off until it is put right. Undo steps back through typing and through changes made in the picture alike, up to 200 steps.

Questions

Can I edit an SVG without installing a program?

Yes. This editor runs in the browser on a computer, a tablet or a phone. For drawing from scratch or reshaping curves you will still want a vector editor such as Inkscape, which is free.

How do I change the colour of one part?

Click that part in the picture, then pick a colour beside Fill or Stroke. To change every use of a colour across the file at once, use Change SVG colours.

Why can I not select a shape?

A shape with no fill can only be picked by its outline, though the editor also tries a few pixels round where you clicked. A shape that lies under another is picked by sending the upper one back first. A copy made with <use> is selected as one piece.

Does it work on a phone?

Yes. Tap a shape to select it, then drag the dashed box to move it or use the arrow buttons for small steps. The code sits under the picture.

Is my file uploaded?

No. The file is read and changed by code running in your browser, and it never leaves your device.

SVG editor