SVG Capability Examples
Every image below is code, written by hand. No image generator, no design tool. Toggle light/dark while reading — the neutral parts follow the theme.
Each is labelled with roughly how much code it took, so you can judge the effort.
1. Icons — trivial
Section titled “1. Icons — trivial”About 4 lines each. They use currentColor, so they inherit the page’s text
colour automatically.
Five line icons. Entirely theme-aware — no light/dark variants needed.
2. Iceberg — the metaphor, realised
Section titled “2. Iceberg — the metaphor, realised”~18 lines. This is the Module 1 stakeholder brief, drawn.
Formal authority above the waterline; informal power below, four times the size.
3. Tree and roots — ~28 lines
Section titled “3. Tree and roots — ~28 lines”Documented knowledge above ground; the tacit knowledge that matters, below.
4. Chart with real text — ~20 lines
Section titled “4. Chart with real text — ~20 lines”Note the labels. Crisp, correctly spelled, selectable, searchable. This is the thing image generators cannot do.
Try selecting the labels with your cursor — they are real text, not pixels.
5. Building cross-section — ~30 lines, the ambitious end
Section titled “5. Building cross-section — ~30 lines, the ambitious end”The architect-as-elevator metaphor: moving between the executive floor and the engine room.
Five floors, a shaft, and a car that travels between them. Everything is a rectangle, a circle or a triangle.
Where it breaks down
Section titled “Where it breaks down”The examples above are all geometric primitives. That is the boundary.
| Realistic by hand | Not realistic by hand |
|---|---|
| Shapes, diagrams, charts, icons | Faces, people with detail |
| Flat metaphors from primitives | Organic texture — fur, foliage, stone |
| Crisp text at any size | Painterly shading, soft light |
| Theme-aware colour | Photographic scenes |
The cost is real: the LLM computes coordinates rather than describing
relationships. “Put this below that” is free in Mermaid; in SVG someone decides
it sits at y=212. Fine for a fixed illustration, tedious for a graph whose
layout should be automatic.
Everything on this page renders identically every time it loads, on every machine, in both themes. That is the difference from a generated image.