Suppose you decide every article gets an illustration. A hundred articles means about a hundred and fifty drawings. Produce those as image files and you now own a hundred and fifty assets, all of which must be remade the day the brand colour changes. Add dark mode and you need a second set.
There is another way: keep the illustration as markup, and let the stylesheet apply the colour. The figures in this article are built exactly like that.
Three costs that come with image files
It helps to be precise about what we are avoiding.
The third row is the expensive one. Image-file illustrations either punch a white rectangle into a dark background or lose their strokes into it entirely. Supporting dark mode therefore means maintaining two sets of drawings — and from that moment the two sets begin to drift apart.
One rule: no colour inside the SVG
The implementation is simple. The SVG carries coordinates and class names only; the stylesheet supplies the colour from design tokens.
<!-- Markup: coordinates and classes. Not a single colour value -->
<svg viewBox="0 0 760 120" role="img" aria-hidden="true">
<rect class="fig__panel" x="0" y="0" width="360" height="80" rx="12"/>
<rect class="fig__accent" x="400" y="0" width="360" height="80" rx="12"/>
<text class="fig__label" x="24" y="46">before</text>
</svg>
/* Stylesheet: the only place colour is decided */
.fig__panel { fill: var(--surface-alt); }
.fig__accent { fill: var(--brand); }
.fig__label { fill: var(--ink); font-size: 14px; }The value of this structure is that changing a token moves every illustration at once. Rebrand the palette, or flip the surface tokens for dark mode, and not one drawing is touched.
Recurring shapes — flows, comparisons, layer stacks — are better still as functions: pass an array of labels, receive an SVG string. Drawing a figure then stops being illustration work and becomes data entry.
Where AI earns its place
The useful slot here is clear: coordinate arithmetic and repetitive code. “Build a five-step flow with arrows between the boxes and the accent class on the last one” is precisely the sort of task these models do well, and far faster than working the geometry out by hand.
What not to delegate is equally clear. The model wants to put colours in. Unprompted, it will helpfully add fill="#1abb9c" attributes, and that one line defeats the entire structure above. State in the prompt that it must use classes and no colour attributes, then check the output for stray values every time.
Three practical traps are worth writing down. First, keep the output on one line — when the CMS splits body text into paragraphs it will insert tags inside a multi-line SVG and break the drawing. Second, keep text inside the SVG to a minimum — on a multilingual site every word in a figure becomes translatable, and differing text widths make the panel wobble. Third, fix the viewBox width — figures with different coordinate systems destroy the size rhythm of the article.
How far this approach goes
Not every picture can be code. Photographs, elaborate illustration and real screenshots belong in image files. Where this approach is strong is drawings that explain structure: flows, comparisons, hierarchies, checklists. On a site that publishes technical content, most of the figures you need are exactly that.
Designing a token system from the start is covered in the design tokens series, and other ways of working with AI are collected in the AI archive. The tools we have built and released are listed on the free tools page.