The house style for the SVG diagrams in diagrams/.
Every swatch and example on this page is rendered by the real stylesheet.
fill, no stroke and no
style attributes. An inline style beats a stylesheet, so a shape
with one silently opts out of the house style — for ever, including the day you
restyle everything else. Inkscape adds them without being asked: use the
? (unset) button in Fill & Stroke.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="../framework/agDiagrams.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1200 675" width="1200" height="675">
<title>What the diagram shows</title>
<rect class="ag-d-ground" x="0" y="0" width="100%" height="100%"/>
...your drawing...
</svg>
Copy diagrams/_template.svg and the first three lines are
already right.
Every diagram uses the same canvas: viewBox="0 0 1200 675" —
16:9, matching the slide canvas, and about 90 mm tall at full width on
A4.
A cramped drawing is not a reason to change the box. It is almost always a reason to simplify the drawing, or to split it in two. Reaching for a taller box is the easy way out and it costs the set its consistency.
The genuine exceptions are shapes rather than sizes. Four sizes exist, and the first is not first among equals — leaving it needs a reason you could say out loud, about the shape of the content rather than about having drawn something too big.
| 1200 × 675 | The default. Full slide width, or the full text width of an A4 page. Use this. |
|---|---|
| 600 × 675 | Half width — one side of a two-column slide. |
| 1200 × 400 | Long and thin — a timeline, a spectrum, a sequence. |
| 600 × 1000 | Tall and narrow — a vertical stack, strata, a process running down the page. |
The two unusual shapes are approximate on that point — a very tall diagram is
limited by the height of the slide rather than its width, so it renders somewhat
smaller and its lines a little finer. Live with it, or promote the strokes that
matter to .ag-d-heavy.
On the half-width size: it exists, and it should be rare. Columns render badly on a phone, where they stack and the pairing that justified them disappears; in written notes a figure wants explanation above and below it rather than beside it; and in a lecture the thing next to the diagram should usually be your voice. Reach for 1200 × 675 and talk over it.
The ground itself — colour, corner radius and hairline border — is set by
.ag-d-ground, so all three can be changed across every diagram at
once. Setting --ag-d-ground to transparent makes the
whole collection transparent retrospectively.
The palette is the easy half. What separates a designed set from an amateur one is that most of a good diagram is quiet, and only the subject is at full strength. Draw everything at the same weight and the eye has nowhere to go.
Classes: .ag-d-ink, .ag-d-muted,
.ag-d-faint, .ag-d-ghost for strokes, and
.ag-d-fill-* for fills. If in doubt, draw it faint and promote only
what you actually talk about.
Three, and they are not equal citizens — regular should carry
around nine tenths of every drawing.
A shape takes a role class saying how it is painted, and a hue class saying which colour to use.
<rect class="ag-d-box ag-d-blue" .../> <path class="ag-d-line ag-d-terracotta" .../> <text class="ag-d-label-hue ag-d-blue">policy</text>
.ag-d-box | Tint fill, base outline, rounded. The workhorse. |
|---|---|
.ag-d-shape | The same paint without a corner radius — circles, ellipses, polygons, free paths. |
.ag-d-solid | Base fill, no outline. |
.ag-d-line | Base stroke, no fill. Connectors and rules. |
.ag-d-label-hue | Text in the hue. |
.ag-d-fine .ag-d-heavy .ag-d-dashed |
Stackable modifiers. |
Leave the hue class off and everything draws in ink.
Reused constantly — and that reuse is what creates the identity. Reach for these first. Each provides a tint for large fills, a base for strokes and solids, and a shade for outlines and text on a tint.
Violet is deliberately absent: it belongs to the slide chrome, and diagrams competing with it would muddy both.
For depiction, not distinction — when you draw a Ferrari it has to be red and a lemon has to be yellow. Do not use these to differentiate parts of a schematic; that is what the core three are for, and a schematic wearing eight hues has no identity at all.
Quiet and small, with air around it. Text set large is the fastest way to make a diagram look like a poster.
A connector is a stroked path plus a separate filled head, not an SVG marker — browsers cannot reliably recolour marker content from CSS, which would defeat the whole system. One head shape and size everywhere; copy the polygon and rotate it.
<path class="ag-d-connector" d="M 100 100 H 280"/> <polygon class="ag-d-arrowhead" points="292,100 276,92 276,108"/>
This stylesheet imports agTeachingDemos.css, so a diagram and an
interactive demo on neighbouring slides are drawn from one set of definitions.
All of its classes work here: materials (.ag-metal,
.ag-water, .ag-brick, .ag-wood…), heat
arrows, graph axes and particles. See
agTeachingDemosGuide.html.
That is the system working. An unclassed shape gets the browser default because nothing has told the stylesheet what it is. Give it the class that says what it is — a box, a connector, context — and the appearance follows.