Overview
A working pattern for adding your first inline SVG diagram with full schema, accessibility, and brand styling. Once you do this once, every additional diagram is a 5-minute extension of the same pattern.
Step 1: Decide what to visualize
The diagram should answer a specific question the reader implicitly has. Examples: "how do these three concepts relate?" (Venn or 2×2), "what are the steps?" (flowchart), "what's the hierarchy?" (pyramid or tree), "how big is each part?" (pie or bar chart).
Don't add a diagram for decoration. Diagrams that don't answer a question dilute the page's quality signal rather than enhance it.
Step 2: Sketch the diagram
On paper or in a quick draw tool, sketch the structure. Identify: the elements (shapes), the labels, the relationships (arrows, lines, containment), and the visual hierarchy (what should be biggest/loudest).
Keep labels short — 1-3 words each. Long labels overflow on mobile.
Step 3: Write the SVG
Use a `viewBox` (e.g., `viewBox="0 0 800 400"`) so the diagram scales. Set `width="100%" height="auto"` on the `<svg>` for responsive sizing.
Use brand-palette colors only. Stroke widths of 2px for lines, 4-8px for accent strokes. Text at 11-14px.
Add `role="img"` and `aria-labelledby` on the `<svg>` element pointing at the IDs of a `<title>` and `<desc>` element you place as the first children of the SVG.
Step 4: Wrap with figure + figcaption
Wrap the `<svg>` in a `<figure>` with a `<figcaption>` below. The figcaption is a one-sentence human-readable summary of what the diagram shows. This appears below the diagram in the rendered page.
Step 5: Add ImageObject schema to page head
Add a `<script type="application/ld+json">` block to the page `<head>` (or via your CMS's schema slot) containing an `ImageObject` schema. Required fields: `name` (short title for the diagram, matching the figcaption), `description` (longer explanation), `contentUrl` (the page URL plus an anchor for the diagram).
Step 6: Test
Open the page in your browser at desktop width and verify the diagram renders correctly. Resize to 320px to check mobile. Use a screen reader to verify the title and description are read out. Validate the ImageObject schema with Google's Rich Results Test.