Embedded Media

Inline SVG Title

Graphics Inside HTML

A small chart uses SVG elements directly in HTML so the browser can render shapes and expose a graphic title.

Program

SVG markup can live inside HTML. The same replay model can highlight each element as the browser builds a graphic from declarative shapes.

inline_svg_title.html
Visuals: captured from real browser rendering
<svg role="img" aria-labelledby="chart-title" viewBox="0 0 160 90">
  <title id="chart-title">Signups increased</title>
  <rect width="50" height="40" x="20" y="40"></rect>
  <rect width="50" height="70" x="90" y="10"></rect>
</svg>

  1. Create the SVG viewport.

    An empty chart canvas appears in the page.
    The svg element creates a coordinate system for the graphic.

  2. Name the graphic.

    The chart viewport remains blank, but its accessible title is set.
    The title element names the whole graphic.

  3. Draw the first bar.

    A short teal bar appears near the bottom of the chart.
    The first rect is a visible shape in the SVG coordinate system.

  4. Draw the taller second bar.

    A second, taller bar appears beside the first one.
    The second rect makes the increase visible.
inline SVG Inline SVG is parsed as markup instead of loaded as a separate bitmap file.
accessible title An SVG title can name the graphic when aria-labelledby points to it.