Developer tool / 28

Online SVG Vector Editor & Drawer

Draw, style, layer, and edit SVG vector graphics visually or via live SVG XML code.

Online SVG Vector Editor & Drawer: Draw rectangles, circles, ellipses, lines, paths and text on an SVG canvas. Move objects, change fill, stroke and opacity, and arrange their layers. You can also import an SVG or edit its markup in the Code tab, then download an SVG or a PNG, or copy the SVG text. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Add Shape:
Bg:
TOEA SVG Editor

Element Inspector & Styling

rect (rect_1)
Layer Actions
Layers (3)
text (text_1)
circle (circle_1)
rect (rect_1)

Draw shapes, paths and text

Add rectangles, circles, ellipses, lines, stars, triangles, hearts, paths or text. Select an object to change its fill, stroke colour, stroke width and opacity, or use the layer controls to duplicate, delete and reorder it. Canvas settings set the drawing size and background.

Move a path on the canvas and edit its shape through the Code tab. Path commands such as M, L and C describe moves, lines and curves. This is not a visual node editor: there are no draggable curve handles. Edited XML is applied when you leave the code field.

Export and import limits

SVG keeps vector shapes and editable text; PNG rasterises the drawing at the canvas size. Copying the markup gives SVG text for use in a page or another editor. Text is not outlined, so its appearance depends on the font available where the file is opened.

Imported files are reduced to supported basic shapes, paths and text. Gradients, filters, clipping, embedded images and group behaviour are not fully retained. Keep the original and compare the imported drawing before exporting a replacement.

How to use it

  1. Add a rectangle, circle, ellipse, line, star, path, or text, and drag it into place.
  2. Set fill, stroke, opacity, corner radius, and layer order.
  3. Download the SVG or a PNG, or copy the markup.

Privacy & limitations

The drawing never leaves your browser — there is no upload, no autosave, and no server. Closing the tab discards it, so download the file before you go.

Related tools

SVG CleanerSVG to JSXSVG Path Visualizer

Frequently asked questions

Can I draw and edit paths?

You can add a path, move it on the canvas, and change its fill and stroke. Edit the path commands in the Code tab to change its shape; there is no visual control-point editor. Code changes are applied when you leave the text field.

Can I add text and simple shapes?

Yes. Add rectangles, circles, ellipses, lines, stars, triangles, hearts, paths or text from the toolbar. Text has wording and font-size controls. You can align, duplicate, delete and reorder objects, and change fill, stroke colour, stroke width and opacity.

Which files can I export?

Download SVG to keep vector shapes and editable text, or PNG for a raster image at the canvas dimensions. You can also copy the SVG markup. Text is not converted to outlines.

Free tool · runs in your browser · no account required