SVG Editor

How coordinates are tracked: because the SVG canvas has its own coordinate system (declared by its `viewBox`) that can differ from its on-screen pixel size, every pointer interaction converts the raw mouse/touch position into true SVG coordinates using `svg.createSVGPoint()` and `point.matrixTransform(svg.getScreenCTM().inverse())` — the standard, always-correct way to convert screen pixels into a specific SVG element's internal coordinate space, regardless of how the SVG happens to be scaled on screen at that moment. Drawing each shape type updates a different set of live attributes as you drag: a Rectangle's `x`/`y`/`width`/`height`, a Circle's `cx`/`cy`/`r` (radius calculated as the straight-line distance from the center point to the current pointer position), a Line's `x2`/`y2` endpoint (while `x1`/`y1` stays fixed at the starting click), and a Freehand Path's `d` attribute, which is built by simply appending an `L x y` (line-to) command for every point captured on `pointermove`, after an initial `M x y` (move-to) starting command — this produces straight-line segments between every captured point rather than a smoothed curve, a deliberate simplification (no bezier curve fitting) that keeps the path-building logic simple and fully predictable, at the cost of a freehand path looking slightly more angular than hand-drawn ink would. Selecting a shape shows a highlight: a dashed outline rectangle is drawn around its bounding box (computed directly from its own x/y/width/height or cx/cy/r attributes for Rectangle and Circle, or via the browser's native `getBBox()` method for Line, Text and Path), plus small circular resize handles — one at the bottom-right corner for a Rectangle, one on the right edge for a Circle's radius, and two, one at each end, for a Line. Dragging a handle recalculates that one attribute (or pair of attributes) live as you drag; a shape can never be resized smaller than 3 SVG units in any dimension, which prevents a shape from accidentally collapsing to zero size and effectively disappearing. Move works by dragging anywhere on an already-selected shape's body (not on a handle): the tool records the shape's starting position attributes the moment the drag begins, then on every subsequent pointer movement applies the total x/y offset from the drag's start point to those original attributes — so the shape tracks the pointer smoothly rather than jumping or drifting. Bring to Front and Send to Back reorder the shape's actual position in the SVG's DOM tree, since SVG (like HTML) paints elements strictly in document order — a shape appended later in the markup always visually sits on top of one appended earlier, so "Bring to Front" literally moves the element to be the last child, and "Send to Back" moves it to be the first child drawn after the white background rectangle. Export: the SVG download works by cloning the live `<svg>` element, stripping out the selection-highlight and resize-handle elements (which exist only for editing and were never meant to be part of the final artwork), and serializing the clean result with `new XMLSerializer().serializeToString()` — the standard browser API for turning a real DOM tree back into a text string, which is guaranteed to produce syntactically valid markup because every element in that tree was created correctly in the SVG namespace from the start. PNG export takes that same serialized markup, turns it into an image via a `Blob` URL, draws that image onto an off-screen canvas at 2x the display resolution for a sharper result, and exports the canvas with `canvas.toBlob()` — the same technique used to rasterize any SVG into a bitmap image in a browser. Worked example: draw a rectangle, then switch to Select and click it — a dashed outline and one corner handle appear. Drag the handle to resize it, drag the shape's body to move it elsewhere, change the fill color (applies immediately to the selected shape), then draw a circle on top of it. Click the rectangle again and press "Send to Back" — it now paints beneath the circle. Click "Download SVG" and the file that downloads is the real, valid vector markup you were just looking at, minus only the editing-only selection outline and handles.