Skip to content

<svg-figure>

The generic figure renderer: it injects a ready-made SVG string verbatim. The geometry is authored in the db — emitted by glyph_svg(<carrier>) — instead of hardcoded in a per-glyph TypeScript element, so this one element draws every page-space figure. The client-backed <enumeratio-figure> wraps it to draw an element's db SVG straight from a (collection, n, rank) address.

Properties

propertytypemeaning
svgstringa complete <svg…>…</svg> string, injected as-is

svg is a property; bind it (:svg / .svg). The injected markup references the shared --enumeratio-* hooks, which inherit through the shadow boundary, so it themes with everything else. Height-driven sizing keeps an inline glyph in step with the surrounding text.

Usage

html
<svg-figure :svg="'<svg viewBox=\'0 0 60 40\'><circle cx=\'20\' cy=\'20\' r=\'14\' fill=\'var(--enumeratio-accent)\' /><rect x=\'34\' y=\'8\' width=\'22\' height=\'24\' fill=\'none\' stroke=\'var(--enumeratio-border)\' /></svg>'"></svg-figure>

Trusted SVG only

svg is injected with Lit's unsafeHTML — pass only SVG you produced (the db's glyph_svg, or your own), never untrusted input.