SVG Components — Reusable Diagram Partials

SVG Components — Reusable Diagram Partials

Owner: Wesley (Web Designer) Source: Uma audit §3 R3 — extracted from v2 POC page1/page2/page3 inline SVGs. Status: structural partials. Edward injects data at generation time.

Each component is a self-contained HTML snippet with an inline <svg> plus a <!-- DATA CONTRACT --> header listing the variables it expects. No external CSS, no JS. The host page must supply colour tokens (--green, --yellow, --navy, --ink-*, --paper-*, --rule) — same as the templates that consume them.

All SVGs:

  • Use role="img" and <title> (WCAG 1.1.1)
  • Use viewBox for responsive scaling (WCAG 1.4.4)
  • Mark decorative elements with aria-hidden="true"
  • Provide named markers in <defs> for reuse
  • Use design-system impact tokens (Uma R8): #009A44 Nouveau · #D4A800 Modifié · #9CA3AF Existant · #B91C1C Fin de vie

Catalog

File Used in Purpose
architecture-context.html page1 §06 9-node, 5-zone target architecture context diagram with integration flows
impact-heatmap.html page1 §07 TOGAF-layer × impact-class heat grid (l0-l5 intensity)
gantt.html page2 §02 24-month Gantt with 4 phases, milestone rail, dependency arrows
critical-path.html page2 §04 Converging-chain dependency diagram (start → chains → convergence → end)
risk-matrix.html page2 §05 3×3 probability × impact matrix with risk dots
stacked-bar-chart.html page3 §03 Stacked CAPEX/OPEX-an1/OPEX-an2-3 bars per category
roi-dual-line.html page3 §04 Investment vs benefits cumulative dual-line with crossover marker
radar-compare.html page3 §06 6-axis radar comparing 2 options on weighted criteria

Conventions

  • viewBox dimensions fixed per component — see individual DATA CONTRACT blocks.
  • Edward replaces {{placeholder}} tokens at generation time.
  • For repeating elements (Gantt phases, risk dots, app nodes, etc.) the component contains one illustrative example wrapped in <!-- REPEAT BLOCK START/END --> for the renderer to loop.
  • All text labels use FR canadien but can be swapped for EN without structural change.

How to use

Edward reads the partial, substitutes placeholders, and inlines the result into the page template. No <script> is required for these components except for the architecture-context tooltip (handled by the host template, see template-page1-solution.html footer script).

Quinn — regression test hooks

Each partial should pass:

  1. role="img" + <title> present
  2. viewBox set, no width/height attributes on root <svg>
  3. No orphan <rect> outside the viewBox
  4. Colour tokens resolve to design-system values (no hex literals outside --* vars except in markers/defs)