# SVGRenderer Import it from `@grafloria/renderer`. ```ts class SVGRenderer implements IRenderer ``` **Properties** | Name | Type | Default | Description | | --- | --- | --- | --- | | `mode` | | | Renderer mode | | `capabilities` | `RendererCapabilities` | | What this renderer can actually do — so callers can ask instead of assuming. `supportsExport` is now TRUE (see `export()` below); hit-testing and text measurement still are not implemented here, and saying so is the point. | **Methods** - `getRegistry(): DiagramRegistry` — Register shapes / styles / markers / link-pipeline stages for THIS renderer alone. The module-level `registerShape()` & friends remain the process-wide registry, and this one shadows it — see `ext/diagram-registry.ts`. - `constructor( private engine: DiagramEngine, config: SVGRendererConfig = {}, theme?: Theme )` - `render(viewport: Rectangle, zoom: number): VNode` — Render diagram to VNode tree. THE REGISTRY SCOPE IS ACTIVATED HERE, around the whole pass, and this is the only place it needs to be for the picture to be right. Every contribution registry the frame consults — shapes, named styles, link/label templates, markers, anchors, connection points, connectors — resolves this diagram's own table first and the process-global one second, including from the read sites that are pure free functions three frames down (`shapeStrategy` in port-layout, `resolveNodeStyle` in the style cascade) and could not have been handed an instance without rewriting their signatures. See `ext/registry-scope.ts`. A diagram that contributed nothing activates nothing, so the single-diagram path is byte-identical to what it was. - `getQualityState(): { tier: LODLevel; governor?: GovernorState }` — The tier actually rendered last frame, and the governor's reasoning for it. Exposed because an invisible governor is indistinguishable from a bug: if the picture silently simplifies, the only honest thing to do is be able to say WHY. The perf HUD reads this; so can an application that wants to tell the user "this diagram is being drawn at reduced detail to stay responsive". - `invalidateFrame(): void` — Drop the cached frame. Call from anything whose effect on the picture the mutation epoch cannot see — a topology event, a style/theme invalidation, a registry swap. Cheap and idempotent: the cost of calling it when you did not need to is one rebuilt frame; the cost of NOT calling it when you did is a stale picture, so when in doubt, call it. - `getInvalidationEpoch(): number` — How many times this renderer has been told "the picture you have is no longer the picture you would draw". A HOST'S idle-skip must consult this, not just the model's mutation epoch. The two are not the same, and the gap between them is a real bug: when the off-thread route solver answers, the MODEL has not changed — the epoch does not move — but the renderer's own answer about it has improved. A scheduler keyed only on the model would drop that repaint before `render()` was ever called, and the refined routes would never reach the screen. The renderer's internal gate cannot save you there; it never gets asked. So: model epoch says "did the world change", this says "did MY picture of it change". Skip a frame only when both say no. - `getFrameCoverage(): FrameCoverage | null` — The {@link FrameCoverage} of the most recent `render()` pass. CAPTURE IT IMMEDIATELY after the render() call whose frame you patched into the DOM — do not hold the renderer and ask later. Exports run through the same render pass with their own viewport (see exportSvg callers), so this field describes whatever rendered LAST, which is not necessarily what is on screen. `createDiagram`'s paint() takes its own copy for exactly this reason. - `getFrameStats(): { built: number; skipped: number }` — The incrementality is only real if these move. `framesSkipped` counts frames served from the previous root (zero DOM work); `framesBuilt` counts frames actually walked. An idle canvas should build ONE. - `getTheme(): Theme` — Get current theme - `setHighlightConnected(value: boolean | HighlightConnectedOptions | undefined): void` — Switch `highlightConnected` live: `false` turns it off, `true` takes the defaults, an object tunes it. The next frame redraws every line. - `getHighlightConnected(): boolean | HighlightConnectedOptions` - `getLineOverlay(): VNode | null` — The lifted lines, as an `` in WORLD coordinates for the overlay the instance keeps at the end of the HTML layer — above SVG nodes and HTML custom nodes alike, moved by the same camera transform. `null` when `highlightConnected` is off; an empty `` when nothing is lifted. - `setTheme(theme: Theme): void` - `applyThemeVariables(theme: Theme): void` — THE HOT-SWAP. Re-theme by rewriting this instance's `--grafloria-*` variables. In CSS mode every value the built-in stylesheet paints resolves through those variables, and every `themeRef`-bound property that lands in an inline CSS style string is emitted as `var(--grafloria-…)`. So for all of them, *this one string write IS the re-theme*: no VNode is rebuilt, no element is touched, the browser simply recomputes. What it cannot cover, it does not pretend to: the entities recorded in `themeBoundNodes` / `themeBoundLinks` (see the field docs) baked a theme literal into their VNode, so they — and only they — are marked dirty and re-resolve on the next frame. An idle diagram re-themes with zero restyles; a diagram with three selected nodes restyles three nodes. Programmatic (Canvas) mode has no stylesheet at all, so there is nothing to rebind and the full invalidation is the only correct answer. - `getColorMode(): ColorMode | undefined` — The colorMode in force, or undefined when the host never asked for one. - `setColorMode(mode: ColorMode, themes?: ThemeSet): void` — Switch colour mode at runtime. `'system'` starts following the OS; the other two pin it. Creates the media-query subscription on first use, so a host can opt in after construction. - `setTokenBridge(bridge: TokenBridge | null | undefined): void` — Point this diagram's variables at the host design system's tokens (`shadcnBridge()`, `muiBridge()`, `tailwindBridge()`, or a hand-written map). `null` removes the bridge. Pure CSS: the values are the host's own `var(--…)` expressions, so when the host app flips ITS theme, this diagram follows with no code at all — and no VNode is rebuilt here either, for exactly the reason the hot-swap works. - `getTokenBridge(): TokenBridge | undefined` — The bridge currently applied, if any. - `getInstanceId(): string` — This renderer's instance id (`grafloria-3`). It is the value of the `data-grafloria-instance` attribute on the root ``, the scope of this diagram's CSS variables, and the suffix of its ``: the shared theme-independent rules, the animation rules, and THIS instance's `--grafloria-*` variable block. Needed by the SSR path. In CSS mode the theme lives entirely in CSS variables, so the emitted SVG is theme-INDEPENDENT — which is exactly what makes hydration cheap, but it also means a server-rendered diagram is unstyled until some stylesheet arrives. `renderToStaticSVG()` returns this string so the server can ship it in a `