Ship output
Choose the smallest truthful SVG mode
Static output, embedded theme CSS, and full semantic hooks share identical geometry.
Separate geometry from interaction payload
| Mode | Adds | Use it for |
|---|---|---|
default |
Accessible static SVG only | articles, email-safe exports, immutable assets |
embedded-css |
isolated theme and state classes | responsive themed documents |
full |
node, port, wire, source-line, and topology datasets | playground mapping and simulations |
Here is the reassuring part: every mode shares one parsed document, one layout, one set of routes, one viewBox. Only the styling and metadata differ, so raising or lowering the mode never moves the drawing underneath. The raw SVG in the playground is the exact string Render View displays — not a reconstructed DOM snapshot.
With wire hooks enabled, every signal wire exposes its parser-resolved topology as data-net-id: named nets keep their author name and unnamed nets use deterministic $N identities. The compilation source map exposes the same value as SchematicWireSource.netId; relation-only UML connectors omit it. Every junction dot the router draws — where a branch leaves its net's copper, or where a wire crosses its own net — carries the schematic-junction class, so a host can style joins apart from terminals. A connection written with trunk still carries data-wire-trunk, and a part declared fit=wires carries data-fit="wires", so the decompiler can read both back. The root <svg> names the measured font stack, Arial, Helvetica, 'Liberation Sans', Arimo, sans-serif, as its default.
source:AA "AA cell" at (90, 130) #blue [type=battery]
switch:PB "press" at (300, 130) #amber [type=pushbutton]
load:BZ "buzzer" at (540, 130) #emerald [type=buzzer]
AA.positive -> PB.in #blue [line]
PB.out -> BZ.in #emerald [line]full mode keeps diagram-local IDs and provides accessible port targets. It never injects scripts, external fonts, raster assets, data URLs, or foreignObject.
Reuse canonical symbols
Identical components reference a single <symbol> definition, and orientation costs only an instance rotation on top of it. A fitted gate or block shares its definition only with parts whose terminals landed in the same places, since its shape depends on its wires. A family we never use adds exactly zero bytes to the diagram, which is why a large drawing of few distinct parts stays small.
diode:DA "D" at (130, 120) #rose [type=schottky]
diode:DB "D" at (350, 120) #rose [type=schottky orientation=down]
diode:DC "D" at (580, 120) #rose [type=schottky orientation=up]