<title> — the SVG accessible name element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The <title> SVG element provides an accessible, short-text description of any SVG container element or graphics element.

Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element.

Note: For backward compatibility with SVG 1.1, <title> elements should be the first child element of their parent.

Example

html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>

Attributes

This element only includes global attributes

Usage context

CategoriesDescriptive element
Permitted contentAny elements or character data

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# TitleElement

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
title
Tooltip display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also