Overview
Shopify's theme architecture supports inline SVG diagrams natively in any section, block, or template. The implementation pattern is the same as any HTML site, with a few Shopify-specific considerations around Liquid templating and the asset pipeline.
The basics
Inline SVG in a Shopify theme works in any `.liquid` template. You write the `<svg>` element directly into the template alongside the other markup. The Liquid template engine doesn't interfere with SVG syntax — they're both valid HTML/XML and coexist cleanly.
For diagrams that appear on many pages (in headers, footers, or shared sections), put the SVG in a Liquid snippet (e.g., `snippets/diagram-citation-flow.liquid`) and include it via `{% render 'diagram-citation-flow' %}`. This keeps the theme files clean and the diagram source single-sourced.
For diagrams specific to one product or article, inline them directly in the relevant template (`templates/article.liquid` for blog posts, `sections/product.liquid` for product pages).
Shopify-specific gotchas
Theme editor preview can be confused by very complex SVGs (5000+ paths) and may lag. For ecommerce diagrams this is rarely an issue — most useful diagrams are under 100 paths.
The Shopify Asset CDN doesn't apply to inline SVG (it's served as part of the page HTML). This is fine for diagrams under 10KB; for larger SVGs, consider whether you actually need them inline vs as a separate `.svg` file in `assets/` referenced via `{{ 'diagram.svg' | asset_url }}`.
Shopify's App Bridge and embedded apps don't support inline SVG the same way — they have their own rendering context. For app development, use Polaris's icon system. This concern applies only to apps, not to the customer-facing theme.
A concrete example
On a product page, you might want a small inline SVG showing where your product fits in your category structure (a breadcrumb-style diagram). Add it inside `sections/main-product.liquid` between the product title and the description. Wrap it in `<figure>` with `<figcaption>` and add an `ImageObject` JSON-LD block to the page head (via the theme's SEO snippet) declaring what the diagram shows. Total implementation: ~30 minutes for the first instance, ~5 minutes for each additional diagram once you have the pattern.