A lone SVG icon says nothing to a screen reader: a bell, a cross or a bar chart are just lines and curves, with no word anywhere to explain what they mean. On a dashboard or an infographic, that missing text becomes a real accessibility and SEO problem.
The <desc> element fills that gap by giving an SVG, or part of one, a written description that never shows on screen but that assistive technology and some search engines can read.
Definition
<desc> is a description element. Placed as the first or second child of an <svg>, or of a graphic element such as <path> or <image>, it holds free-form text, as long as needed, explaining what the shape or illustration represents. That text is never drawn: it has no font, no colour, no position. It only lives in the source code, much like the alt attribute on a plain HTML image, except with room for a full paragraph rather than one short phrase.
Where to place it and how to link it
<desc> has no attributes of its own: what matters is its position in the tree and, if the description should really be picked up, an id tied back to the parent element through aria-describedby. Adding role="img" on the root <svg> confirms to assistive technology that this is a full image, not mere decoration it can skip.
<svg
viewBox="0 0 24 24"
width="48"
height="48"
role="img"
aria-labelledby="bellTitle"
aria-describedby="bellDesc"
>
<title id="bellTitle">Security alert</title>
<desc id="bellDesc">
A tilted bell signalling that an event on the dashboard needs your immediate
attention.
</desc>
<path
d="M12 2a1 1 0 0 1 1 1v1.1a7 7 0 0 1 6 6.9v4l1.6 2.2a1 1 0 0 1-.8 1.8H5.2a1 1 0 0 1-.8-1.8L6 15v-4a7 7 0 0 1 6-6.9V3a1 1 0 0 1 1-1z"
fill="#1f2937"
/>
<circle cx="12" cy="21" r="1.6" fill="#1f2937" />
</svg><desc> versus the SVG <title> and the HTML title attribute
Three mechanisms carry almost the same name, and mixing them up is the single most common mistake. The title="..." attribute is a universal HTML property: set on a <div>, a <button> or even the root <svg>, it triggers the browser's native tooltip on hover. The <title> element is specific to SVG: placed as the first child of an <svg> or a shape, it gives a short name, roughly the equivalent of a button label, and also acts as a tooltip in some desktop browsers. <desc> goes further: it carries a long description, meant to be read and understood, never squeezed into a bubble that vanishes after two seconds.
| Mechanism | What it carries | Who sees it |
|---|---|---|
HTML title attribute | A word or short phrase | A hover tooltip, on any HTML element |
SVG <title> element | A short name, like a label | Screen readers, sometimes a tooltip |
<desc> element | A long, detailed description | Screen readers and indexing tools, never shown |
A concrete example
Take the bell icon above again. Visually, nothing changes: the shape renders exactly the same with or without <desc>. The difference plays out elsewhere, in the accessibility tree the browser builds behind the scenes. A screen reader first announces the short name carried by <title>, "Security alert", then, if the user asks for more detail, reads the full description carried by <desc>. A sighted visitor never notices that second layer, and does not miss it either, since the shape is right there to look at.
Classic trap
Order matters more than it seems. Older screen readers, and some indexing tools still in use, only look at the very first children of an element to work out its accessible name: <title> then <desc>, in that exact order. Putting <desc> before <title>, or burying either one after several shapes, quietly drops one of the two, with no error anywhere in the console.
A real use case
On a finance dashboard, a line chart drawn with <path> can look perfectly clear to the eye and stay completely silent for a screen reader. Adding a <desc> that sums up the trend, something like "Revenue up 12% in the third quarter, with a peak in September", makes that information available without changing a single pixel of the chart. An icon library or an animated logo benefits from the same trick: the shape stays exactly as designed, but its meaning finally reaches anyone who cannot see it.
Frequently asked questions
Should every SVG have a <desc>?
No, only when the SVG carries information the surrounding text does not already give. A purely decorative icon next to an already-named link, such as an arrow beside a link's own text, needs neither <desc> nor <title>, and can even be hidden from assistive technology with aria-hidden="true".
Can <desc> text span several sentences?
Yes, the specification allows some basic inline markup inside it and text as long as you find useful. In practice, aiming for two or three clear sentences remains more useful than a long block no user will sit through in full.
Why does <desc> never show up in design tools like Illustrator or Figma?
These tools mostly export visible geometry and leave accessibility out by default. <desc> text is almost always added afterwards, directly in the exported SVG source, alongside cleaning up stray ids and unused groups.