CONCEPT
SVG Rendering Modes
The four distinct pathways by which a vector illustration reaches the screen —
PNG raster,
img-embedded SVG,
object-embedded SVG, and
inline SVG — 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