HTML inline SVG: give a meaningful vector a name

Use it for a real task

A status icon signals that a receipt is held. The vector is small and crisp at different display densities. Its title and labelled-by relationship identify the graphic, while adjacent text states the same status without depending on color or shape alone. If the symbol were only decoration, it should be hidden from assistive technology instead of receiving a redundant name.

<p>
  <svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-labelledby="held-icon-title">
    <title id="held-icon-title">Held receipt</title>
    <circle cx="12" cy="12" r="9" fill="currentColor"></circle>
  </svg>
  Receipt R-47 is held for review.
</p>

What the markup guarantees

This markup provides no decision workflow; it only conveys a status. The color inherits from text styling, but the explicit sentence remains the authoritative visible message when color perception varies.

Cost and limits

One small inline shape avoids an asset request. Large repeated SVG trees can add document weight; use a reusable asset or symbol strategy when measurement shows duplication matters.

Common Mistakes

• Do not communicate status only with fill color.
• Do not give a decorative icon a verbose duplicate name.
• Keep aria-labelledby pointing to an ID inside the graphic.

Connected lessons

• HTML image alt text: describe function or information, not pixels alone
• HTML figure and figcaption: keep an asset with its explanation
• HTML status region: announce a changed result without stealing focus

Related: HTML MathML: keep mathematical meaning in the document.

Related CSS decisions

• CSS image-rendering: preserve a pixel map's hard edges