Output a person can read
Coordinates are rounded to three decimals, and <rect> and <circle> stay as themselves instead of turning into paths. Layer names become id attributes, so CSS and JavaScript can find them.
Free online SVG editor · No sign-up
Draw it visually. Get SVG code you can actually read.
TidySVG is an online SVG editor with shapes, a pen tool, boolean operations and gradients. When you export, a rectangle stays a <rect>, coordinates are rounded, and layer names become ids, so the file can go straight into your codebase.
Your drawings are stored only in your browser. Nothing is uploaded.
Made for people who ship SVG, not just look at it
Copy a shape, get SVG code
Copied shapes land on the clipboard as SVG markup. Paste them into your code editor or JSX, or paste SVG copied from other apps back onto the canvas.
Nothing to install, nothing uploaded
Everything runs in the browser, and your document autosaves locally as you work. You don't need an account.
Same shapes, very different files
A rounded rectangle and a circle, exported two ways. On the left, the kind of export design tools often produce. On the right, what this editor actually writes.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-340.000000, -212.000000)">
<path d="M364,224 L436,224 C442.627417,224 448,229.372583 448,236 L448,308 C448,314.627417 442.627417,320 436,320 L364,320 C357.372583,320 352,314.627417 352,308 L352,236 C352,229.372583 357.372583,224 364,224 Z" id="Rectangle" fill="#1F6FEB"></path>
<circle id="Oval" fill="#FFFFFF" cx="400" cy="272" r="16"></circle>
</g>
</g>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<rect x="12" y="12" width="96" height="96" rx="12" id="card" fill="#1f6feb"/>
<ellipse cx="60" cy="60" rx="16" ry="16" id="dot" fill="#ffffff"/>
</svg>The SVG editing tools you need, without the clutter
We took the depth of a pro illustration app and kept only what matters for SVG. Everything happens right on the canvas, so a first-time user can find their way.
Pen and pencil
Click for corners, drag for curves. Freehand pencil strokes become smooth Bézier curves automatically.
Anchor editing
Double-click any shape to edit its anchors. Rectangles and ellipses convert to paths on the fly.
Boolean operations
Unite, minus front, intersect, exclude and compound paths, with nonzero / evenodd fill rules.
Fills and strokes
Solid colors, linear and radial gradients, an eyedropper, caps, joins and arrowheads.
Layers and smart guides
Drag to reorder, toggle visibility and locks. Shapes snap to the edges and centers of others as you move them.
Import and export
Opens SVG with transforms, viewBox, <use> and CSS classes. Exports SVG and PNG at 1x, 2x or 4x.
Frequently asked questions
Is it really free?
Yes. Every current feature is free, and you don't need an account.
How do I edit an SVG file online?
Open the editor, then drag your SVG file onto the canvas or use File → Open. When you're done, File → Save as SVG downloads the result. Your file is never uploaded anywhere.
Where is my work stored?
In your browser's local storage. Nothing is sent to a server. To continue on another device, save as SVG and open that file there.
Can it open SVGs from Illustrator or Figma?
Yes. It handles transforms, viewBox, <use> / <symbol>, CSS classes, gradients, compound paths and embedded images. Some elements, such as certain filters, may not be imported.
What do I need to run it?
A current desktop browser: Chrome, Edge, Safari or Firefox. It's designed for a mouse or trackpad.
Where can I send feature requests or bug reports?
Email us at support@tidysvg.yocto-works.com. We read every message and use them to decide what to improve next.
Draw one thing and see for yourself
It opens instantly. If it's not for you, just close the tab.
Open the editor