Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides