Dofactory.com
Dofactory.com

HTML <svg> title Attribute

The title attribute on an <svg> tag adds title text to the svg image.

Hovering the mouse over the image will not display a tooltip, but screenreaders can use the title text.

Example

#

A title attribute on an <svg> image.
Note: no tooltip appears when hovering over the svg image.

<svg title="Circle" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="steelblue" 
          stroke-width="2" fill="lightblue" />
</svg>

Code explanation

The title attribute is placed on the <svg> opening tag.

The value can be any string. Hover over the svg and a tooltip appears.


Using title

The title attributes attaches additional information to the <svg> image.

The title attribute value can be read by screenreaders.

No tooltip appears when the svg element is hovered.

Use the svg <title> tag to get a tooltip on the svg image.


Syntax

<svg title="value">

Values

#

Value Description
value A string value. A title can span multiple lines by including newline or carriage-return characters:  &#10;  or  &#013;.

Browser support

Here is when title support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.0 Jun 2008
IE/Edge
9.0 Mar 2011
Opera
10.1 Jun 2010
Safari
3.2 Nov 2008

You may also like

 Back to <svg>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


Quick question: what's your favorite/least favorite part of Dofactory?


Guides