Visual diagrams rendered directly in HTML (inline SVG or HTML/CSS) rather than embedded as external image files. The format AI search engines can parse, schema-mark, and cite.
Inline Diagrams in plain English
An inline diagram is a visual element whose source code lives directly in the page HTML rather than being referenced as an external `<img>` file. The most common implementation is inline SVG — the `<svg>` element with all its `<path>`, `<rect>`, `<text>`, and `<g>` children written into the page body. CSS can style the diagram, JavaScript can animate it, and crucially, search engines and AI crawlers can read the structured content (the labels, the relationships between shapes, the title and description elements).
External images — PNG, JPG, even SVG referenced via `<img src>` — are opaque to crawlers. They're a single binary blob. The crawler knows it's an image and reads the alt text, but can't see what's in the image semantically. An inline diagram with proper labels, ARIA roles, and ImageObject schema is a structured document the crawler can extract from, link to, and cite as a source.
For ecommerce SEO specifically, the trade-off is clear: a category-overview diagram rendered as inline SVG with labeled product groupings is citable content. The same diagram as a PNG is decorative. AI search engines like Perplexity and ChatGPT search preferentially cite pages with rich structured content; inline diagrams are part of that richness.
Implementation pattern: wrap the SVG in a `<figure>` with a `<figcaption>` describing what it shows. Add `role="img"` and `aria-labelledby` pointing at `<title>` and `<desc>` elements inside the SVG (these are the SVG-native equivalents of alt text). Add an `ImageObject` schema in the page `<head>` describing the diagram, its content, and linking to the page anchor. This combination of HTML semantics + ARIA + schema gives the diagram the same level of crawlability as the body text around it.
Why inline diagrams matters for ecommerce
For ecommerce stores building toward AI citation, inline diagrams are an underused leverage point. Most stores don't include diagrams at all (text-only blog posts), and the stores that do mostly use external PNGs (decorative but uncrawlable). Switching to inline SVG with proper schema gives you a citation-eligible visual layer competitors don't have. The implementation cost is one-time (a template + a brand-color palette + an a11y pattern), and every new page benefits forever. Pages with rich inline diagrams get cited proportionally more on AI surfaces than text-only competitors, even when the underlying content quality is similar.