06 / 11
Choose how much SVG to emit
Keep static diagrams small or add CSS and interaction hooks when a page needs them.
01 / Output
Pick a mode at the render boundary
The geometry is the same in every mode. Only styling and interaction metadata change.
| Mode | Adds | Good fit |
|---|---|---|
default |
Minimal static SVG | Articles, email, PDF, image export |
embedded-css |
Built-in hover and focus styles | Responsive documentation |
full |
CSS, data-* hooks, and focus targets |
Editors, diagnostics, simulations |
Choose the mode on the trusted server or build step:
ts
renderSchematic(document, { ...fence, mode: 'full' });
Start with default. Move up only when the host actually uses the extra behavior.
In full mode, trim unused metadata without changing the drawing:
ts
compileSchematic(source, {
...fence,
mode: 'full',
semanticHooks: ['nodes', 'wires']
});