SVG Editor online
Code

Export

Width and height stay in proportion. JPG has no transparency, so it always gets a background.

Help

How it works

  1. Open an SVG file, drag it into the window or paste SVG code - or start with New.
  2. Click a shape on the canvas. Drag it to move it, drag the small squares to resize it. Colors, size and position are under Properties on the right.
  3. Draw new shapes with the tools above the canvas.
  4. The code on the left always shows the current drawing and can be edited directly.
  5. Download SVG saves the file, Export offers pictures (PNG, JPG) and code for websites.

Made a mistake? Undo takes back every step. Your drawing is kept in this browser, even after closing the page.

Keyboard shortcuts

V
Select and move
R E L P T
Rectangle, ellipse, line, freehand, text
H / hold Space
Move the view
Mouse wheel, + -
Zoom
0 / 1
Fit to window / actual size
# / G
Grid on/off / snap on/off
Arrow keys
Move the selection by 1, with Shift by 10
Shift while dragging
Only horizontal/vertical, keep proportions
Alt + click
Select the surrounding group
Delete
Remove the selection
Ctrl + D
Duplicate
Ctrl + ↑ / ↓
Forward / backward (with Shift: to front / to back)
Ctrl + Z / Y
Undo / redo
Ctrl + S / E
Download SVG / export
Esc
Deselect

In the code: Tab indents, Shift+Tab outdents, clicking into a tag selects that shape on the canvas.

View, edit and export SVG online

The SVG Editor shows your drawing and its code side by side. Whatever you change in the code appears in the preview right away - and whatever you move, resize or recolor on the canvas shows up in the code. That makes it quick to adjust icons, logos, charts and illustrations without opening a large graphics program.

Everything runs in your browser. Files are not uploaded, there is no sign-up and no advertising.

What the editor can do

Code with highlighting

Tags, attributes and values in their own colors, line numbers, indenting with Tab, automatic closing of tags and a clear error message with the line number.

Edit shapes directly

Click, drag, resize with the handles, rotate, flip, duplicate, bring forward or send backward - rectangles, circles, paths, polygons, text and groups.

Colors and outlines

Fill and outline with a color picker or as a value, opacity, outline width, dashed lines, round or square line ends.

Grid with snapping

Any grid spacing, in the drawing's own coordinates. Shapes snap exactly onto the lines - or untick "Snap" to move them freely.

Drawing tools

Rectangle, ellipse, circle, line, freehand and text - with your choice of colors for new shapes.

Export

SVG (as written, tidied up or shrunk), PNG with a transparent background, JPG, WebP, data URI, Base64, CSS and React component.

How it works

  1. Open an SVG - choose a file, drag it into the window or paste the code.
  2. Edit - type in the code, or click shapes on the canvas, drag them and set their colors on the right.
  3. Export - choose a format, set the size for pictures, then download or copy.

Frequently asked questions

Is my SVG file uploaded?

No. The editor runs entirely in your browser. Files you open and your code are never sent to a server; a draft is only kept in your browser's local storage.

How do I convert an SVG to PNG?

Open or paste your SVG, click "Export", choose PNG, pick a size (1×, 2×, 4× or your own) and click "Download". The background stays transparent unless you choose a color.

Can I edit shapes with the mouse?

Yes. Click a shape to select it. You can drag it, resize it with the small squares, rotate, flip and recolor it. The code on the left changes along with it.

What does the grid do?

The grid shows guide lines in the drawing's own coordinates. When it is on, shapes you move or draw snap exactly onto the grid lines. Untick "Snap" to keep the grid visible but move shapes freely.

Can I use an SVG as a React component?

Yes. Choose "React component (JSX)" in the export. Attributes such as stroke-width become strokeWidth, class becomes className, and the component accepts further props.

Does the SVG Editor cost anything?

No. The editor is free, without ads and without sign-up.