CONCEPT
SVG Rendering Modes
The four distinct pathways by which a vector illustration reaches the screen — <em>PNG raster</em>, <em>img-embedded SVG</em>, <em>object-embedded SVG</em>, and <em>inline SVG</em> — each with categorically different relationships to the document's cascading context.
A rendering mode is not a neutral delivery channel but a specific contract between the illustration and its surrounding document. The PNG baseline delivers pixels whose color is frozen at export. The img-embedded SVG carries its styling sealed at the boundary of its own document, inheriting nothing from the parent page. The object-embedded SVG opens a narrow window through which currentColor inheritance can flow. The inline SVG dissolves the boundary entirely, exposing every path to the document's styling authority. These four modes constitute a taxonomy of embedding depth — how much of the host document's cognitive environment the illustration is permitted to inhabit.
In The You On AI Field Guide
The taxonomy matters because it determines what kind of amplifier the illustration becomes. A PNG is the maximally disburdening choice — the designer commits to a specific color at export, and every downstream viewer receives that commitment unchanged. This is the workmanship of certainty applied to illustration: the jig (the raster
Keep reading with YOU ON AI
Unlock the full book, 10,000+ field-guide entries, and a 1000+ thinker library. If you have a book code, register now — it takes a minute.