A single-file SVG drawing and annotation editor. No install, no server, no build step. Download sved.html, open it in a browser, and draw.
Built as a companion to Dasu.print — the two tools share the same keyboard shortcuts and dark theme so switching between them feels natural. SVed handles freehand SVG drawing and node editing; Dasu composes drawings into title-blocked print sheets.
- Drawing tools — Select, Line, Polyline, Rectangle, Ellipse, Text, Pen (freehand), Pan, Nodes
- Fill — None, Colour, Hatch (6 patterns), Gradient (linear/radial, variable stops), Image fill
- Object settings — Rotation, Mirror, Scale (with Shift = lock aspect), Rounded corners, Arrowheads with adjustable size, Text background, Element and fill transparency
- Node / vertex editor — Drag vertices, bulge edges to circular arcs, double-click to restore straight
- Boolean ops — Union, Subtract, Intersect (self-implemented Greiner–Hormann, no dependencies)
- Selection — Click, Shift+click, Ctrl+A, right-drag window, left-drag crossing
- Multi-select — move, delete, duplicate, nudge, group all operate on the full set
- Asset library — save any object as a reusable asset, stored in localStorage, export/import as JSON
- SVG import — open any SVG with correct canvas sizing, defs merging, text/tspan preservation,
<use>expansion, style attribute baking - Units — px / mm toggle throughout (96 dpi, all inputs convert)
- Hit tolerance — invisible fat-stroke overlays make thin lines easy to click; configurable in Properties
- Download
sved.html - Open it in any modern browser (Chrome, Edge, Firefox, Safari)
- That's it — no internet connection required after download
Everything is self-contained in the one file. Fonts (IBM Plex Mono, Instrument Sans) are embedded as base64, so it works offline.
| Key | Action |
|---|---|
| V | Select |
| Q | Rectangle |
| E | Ellipse |
| L | Line |
| P | Polyline |
| D | Pen (freehand) |
| T | Text |
| H | Pan |
| N | Node edit |
| F | Fit view |
| G | Toggle grid |
| S | Toggle snap |
| Ctrl+Z / Y | Undo / Redo |
| Ctrl+A | Select all |
| Ctrl+D | Duplicate |
| Del | Delete |
| Arrow keys | Nudge (Shift = ×4) |
| Shift+draw | Constrain (square, circle, angle snap) |
| Ctrl+draw | Ortho lock |
| Esc | Cancel / exit mode |
- Single file — everything lives in
sved.html. Source is the file. - No dependencies — vanilla JS, raw SVG DOM. No frameworks, no CDN calls.
- Boolean engine — Greiner–Hormann polygon clipping, self-implemented (~300 lines).
- Fonts — IBM Plex Mono and Instrument Sans, embedded as base64 TTF (SIL OFL 1.1).
- Asset storage — browser localStorage, key
sved_assets_v1. Export/import as JSON for cross-machine use. - SVG output — clean, standards-compliant SVG with
viewBox, absolute px dimensions, inlined defs.
- Layers not implemented — all objects sit on one drawing layer
- Text is single-line (multi-line via multiple text elements)
- Boolean ops linearise curves (ellipses become 64-segment polygons)
- No dimension tool yet
SVed is not a replacement for Dasu — they do different things. Dasu manages drawing sheets, title blocks, scale labels, and IFC/BIM integration. SVed is where you draw and annotate individual SVG files that Dasu then places on sheets. The two tools are meant to be used together.
Code: MIT
Fonts: SIL Open Font Licence 1.1 (IBM Plex — IBM, Instrument Sans — Google)
Built by Nigel Lamb / 4nigel as part of the Dasu.print / Bonsai BIM FOSS toolchain for NZ residential construction delivery.
Bugs, ideas, and pull requests welcome.