SVG editor
Edit SVG in the browser: add rectangles, circles, ellipses, lines, polygons, text and paths, tweak position, size, fill, stroke, opacity and radius, reorder layers, undo and redo, preview live and export the SVG source.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"> <rect x="0" y="0" width="400" height="300" fill="#FFFFFF" /> <rect x="60" y="60" width="160" height="100" rx="8" fill="#4D6BFE" stroke="#1F2937" stroke-width="2" /> </svg>
What this tool does
- Sketch a quick diagram: drop in rectangles, circles and text, adjust position and colour, then export SVG without opening a design tool.
- Assemble a simple vector for a button, icon or placeholder and paste the generated SVG source straight into a component.
- Edit existing artwork — fill, stroke, opacity, corner radius — and use bring-forward / bring-to-front to fix stacking, with undo on every step.
- Copy the SVG source out into another tool (rasterise it, animate it): every attribute written is standard SVG.
Example
Input
Canvas 400 × 300, background #FFFFFF, add one default rectangle (x=40, y=40, 120 × 80, fill #4D6BFE, stroke #1F2937 width 2)
Output
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"> <rect x="0" y="0" width="400" height="300" fill="#FFFFFF" /> <rect x="40" y="40" width="120" height="80" fill="#4D6BFE" stroke="#1F2937" stroke-width="2" /> </svg>
When the background is not none, the source starts with a rectangle covering the canvas. Shapes paint top-down in layer order, so a later shape covers an earlier one.
Frequently asked questions
Why are circles and ellipses described by a bounding box?
So that the same X / Y / width / height fields work for every shape. On export the centre comes from the box centre and the radius from half of the smaller side (each half for an ellipse), so editing width and height really does resize and reposition it.
How is the layer order decided?
Later entries in the list paint on top, so a newly added shape covers the earlier ones. "Bring forward" and "Send backward" swap neighbours, "Bring to front" and "Send to back" jump straight to the ends, and every step is undoable.
Why does the corner radius shrink by itself?
A rectangle’s rx is clamped to half of its width and height so an oversized radius cannot make the shape undrawable. Typing 100 for a 120 × 80 rectangle exports as 40.
What if I set fill or stroke to none?
A fill of none omits the fill attribute entirely (no fill), and a stroke of none or a stroke width of 0 omits stroke and stroke-width. A line whose stroke is cleared falls back to the default #1F2937 at width 2 so it stays visible.
Is my drawing saved?
No. The shapes live only in this page’s memory, are gone on refresh, and are never sent to a server. Press "Download SVG" if you want to keep the source.
Keywords：svg 编辑器svg editorsvg 在线编辑画矢量图vector editorsvg 源码图形编辑svg 绘制