SVG experiments should make structure, audience, and reuse more legible.

Declarative host

<figure
  class="spw-svg-figure"
  data-spw-svg-host="launch-card"
  data-spw-svg-pointer="field"
  data-spw-svg-scale="wide|narrow-wide|compact"
  data-spw-image-model="branded SVG card for screenshot interpretation">

Portable spell

import { applySvgQueryTunability } from '/public/js/compose.js';

applySvgQueryTunability(document);

Addressable nodes

Rail chips that anchor to a named <g id> preview that node on hover or focus — the rest of the diagram recedes — and arriving at the anchor pulses the node so the jump lands visibly. The named seams are the same ones a handoff should keep stable.

<a href="#diagram-authored-seed">authored seed</a>
<g class="op-node--frame" id="diagram-authored-seed">

Copy actions

Chips with data-spw-svg-action serialize the specimen without leaving the page: copy-url writes the current tuning into a shareable, reproducible query URL; copy-source copies the SVG markup itself for handoff. Both settle into a visible copied state.

<button data-spw-svg-action="copy-url">
<button data-spw-svg-action="copy-source">

Palette reason

Named SVG palettes apply a color disposition and write data-spw-svg-palette-reason. Color can still be overridden by brand query values when QA needs exact comparison.

?spw-svg-palette=warm-offer
?spw-svg-accent=%23008080&spw-svg-field=%23f6ffff

Viewing environment

Use spw-svg-env=studio|proof|poster|model when the same authored SVG needs a different viewing reason: in-page review, proof sheet, featured capture, or rendering-model handoff.

?spw-svg-env=proof&spw-svg-motion=paused
?spw-svg-env=model&spw-svg-pointer=none

Audience facet

Name who the same SVG serves with data-spw-svg-persona on the host. Keep <title> and <desc> geometry-first; compact diagram labels and the figcaption register carry role seams instead of repeating persona lists in prose.

data-spw-svg-persona="designer builder reviewer rendering-model"
?spw-svg-persona=reviewer

Role before style

Name whether the SVG is a diagram, speech bubble study, character sheet, token set, map mark, or ritual prop. The role constrains the geometry better than mood words alone.

Material cues

Say what the lines are pretending to be: chalk, clay seams, stitched paper, glass, stabilized enchantment rings, speech-bubble membranes, seed rows, joinery marks, or woven threads. That keeps trope physics from turning vague.

Material note

Name one real process the image can teach: clay shrinkage, paper grain, crop spacing, wool felting, metal patina, bread proofing, or wood movement. The screenshot gets stronger when one fact has a place to stand.

Stable seams

Keep node ids, operator roles, and reuse targets explicit. A later model can change size, ornament, or local detail, but it should not have to guess which parts repeat across the family.

Mutation budget

Tell the next tool what can move: palette, border treatment, posture, accessory marks, label copy, or texture density. Tell it what should stay anchored: silhouette, reading order, and structural slots.