class

rpic extension. class attaches CSS class names to the SVG group already emitted for each shape (<g id="sN" class="…">). It changes nothing in rpic’s own rendering — styling happens in the host document that embeds the SVG, the same delegation contract as animate.

Two forms write to the same hook — and since this page is a host document, its CSS is already styling them: payment is critical (red), the cache circle is storage (hover it!), the wire is dashed dataflow:

.PS
box "payment" fit class "critical"     # inline, at creation

A: circle "cache" rad 0.3 at last box + (1.3, 0)
line right 0.6 from A.e
class A "storage"                      # statement: by label
class last line "dataflow"             # statement: by ordinal
.PE

The statement form uses pic’s native references — labels and ordinals — so it also reaches shapes drawn inside macros (circuit elements!), and lets class lines cluster at the end of a picture like a theme block.

Composing classes

The same vocabulary plus pulse — classes compose like anywhere in CSS:

.PS
W: box "web" wid 0.6 ht 0.45
D: circle "db" rad 0.28 at W + (1.25, 0)
A: box "ALERT" wid 0.7 ht 0.45 at D + (1.35, 0)
arrow from W.e to D.w class "dataflow"
arrow from D.e to A.w class "dataflow"
class W "storage"
class D "storage"
class A "critical pulse"
.PE

Hover web and db; the dataflow arrows go dashed teal; ALERT is critical and pulse — classes compose like anywhere in CSS. In PNG/PDF (or any page without this CSS) the same picture renders plain — the hook is inert.

Rules

• Inert by itself: without host CSS, SVG/PNG/PDF output is visually identical. In the embedding page:

  .critical rect      { stroke: #b91c1c; stroke-width: 2px; }
  .storage rect       { fill: #f0fdf4; }
  .storage:hover rect { fill: #166534; }   /* interactivity for free */
  .dataflow           { stroke-dasharray: 6 3; }

• Names are validated ([A-Za-z_][A-Za-z0-9_-]*, space-separated) — no injection surface. Multiple applications append: class="a b".
• The internal s<N> ids stay untouched — they remain the animation targets.
• Resolution happens at the statement’s point in the program (like animate); reassigning a label later doesn’t move the class.
• Host CSS reaches inline-embedded SVG; an <img src> reference isolates the document.
• Motion from host CSS (hover, transitions) can escape the canvas — unclip with svg { overflow: visible } host-side, or reserve room with margin when the picture itself animates.

Design notes: docs/svg-styles.md.