The open-source SVG-Edit engine, unmodified, running in your browser
<rect width="200" height="100" rx="12"/>, a circle at cx=160 cy=60 r=20 (spanning x 140–180, y 40–80 — inside the canvas), and a text label.| Element | Draws | Key attributes |
|---|---|---|
<rect> | Rectangle / rounded box | x, y, width, height, rx (corner radius) |
<circle> | Circle | cx, cy (center), r (radius) |
<ellipse> | Oval | cx, cy, rx, ry |
<line> | Straight line | x1, y1, x2, y2 |
<polyline> | Connected strokes | points="x,y x,y …" |
<polygon> | Closed shape | points (last point auto-joins the first) |
<path> | Anything: curves, arcs, freeform | d (M moveto, L lineto, C/Q curves, Z close) |
<text> | Text | x, y (baseline), font-size, font-family |
<g> | Group (moves/transforms children together) | transform (translate, rotate, scale) |
<use> | Reuse a defined shape | href="#id" pointing at a <defs> element |
Every element also takes fill, stroke, stroke-width, opacity, and id. The editor's source panel is the fastest way to learn these — draw a shape, then look at the XML it produced.
| Tool | Type | License / cost | Best for |
|---|---|---|---|
| This page (SVG-Edit) | Browser, no install | MIT, free | Quick edits, icons, learning SVG source |
| Inkscape | Desktop app | GPL, free | Heavy illustration, print layouts, tracing |
| Method Draw | Browser | Free | Minimal UI — but development went quiet years ago |
| Boxy SVG | Desktop / web | Commercial | Polished desktop-style editing on a Chromebook |
| Figma / Illustrator | Design suites | Commercial | Multi-file product design; SVG is an export, not the working format |
SVG-Edit works like any drawing app, with one superpower: the SVG source is always one click away. The toolbar on the left holds the drawing tools — select, square/rectangle, circle/ellipse, line, path, polygon, text, and zoom. The top bar carries layers, alignment, and the source panel. Open an existing file with the folder icon, save with the disk icon, and export to PNG or PDF from the export menu.
Paste this into the editor's source panel and you have a 200×100 badge — the four elements described in the intro in real coordinates:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"> <rect width="200" height="100" rx="12" fill="#2563eb"/> <circle cx="160" cy="60" r="20" fill="#fbbf24"/> <text x="20" y="45" font-size="20" font-weight="bold" fill="#ffffff">BETA</text> </svg>
The math checks out on sight: the canvas is 200 wide and 100 tall; the circle centered at (160, 60) with radius 20 spans x 140–180 and y 40–80, so it clears the right edge (180 < 200) and the bottom edge (80 < 100); the text baseline sits at y=45, comfortably inside the rounded rect. Change cx to 190 and the circle's right edge (210) would clip past the canvas — the kind of arithmetic the source view makes obvious and the visual canvas makes instant.
Yes. This page runs the open-source SVG-Edit engine directly in your browser: open your .svg file, edit with the toolbar or the source view, and save back to your machine. Nothing is uploaded and there is nothing to install.
Draw rectangles, ellipses, lines, polygons, freehand paths, and text; select and move anything; group and align elements; work in layers; edit gradients, strokes, and fills; hand-edit the XML source of the drawing; and export to SVG, PNG, or PDF. It is the same editor the SVG-Edit project ships, unmodified.
Very much so. SVG is the native format for icons and logos on the web, it scales to any resolution with tiny file sizes, and cutting machines and plotters take SVG directly. If a graphic needs to look sharp at every size, it is an SVG job.
SVG natively, PNG at your choice of size, and PDF through the bundled jsPDF SVG-to-PDF plugin that ships with SVG-Edit. For crisp icons and logos, export SVG — raster formats defeat the point of vectors unless a target app only accepts images.
Yes. The editor loads from a CDN but your drawing and files never leave your machine: open, edit, and save happen locally in the browser, with no server round-trip for your work.
SVG-Edit is MIT-licensed, with one bundled dependency (the jsPDF SVG-to-PDF plugin) under LGPL-3.0-or-later. This page serves the official, unmodified release from the jsDelivr CDN, which keeps both licenses intact.