id

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Theid attribute assigns a unique name to an element.

You can use this attribute with any SVG element.

Example

html

<svg  width="120"  height="120"  viewBox="0 0 120 120"  xmlns="http://www.w3.org/2000/svg">  <style>    <![CDATA[      #smallRect {        stroke: #000066;        fill: #00cc00;      }    ]]>  </style>  <rect x="10" y="10" width="100" height="100" /></svg>

Usage notes

Value	<id>
Default value	None
Animatable	No

<id>

Specifies the element's ID. The ID must be unique within the node tree, must not be an empty string, and must not contain any whitespace characters.

Note:You should avoid the use ofid values that would be parsed as an SVG view specification (e.g.,MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) or a basic media fragment when used as a URL target fragment.

It must be valid in XML documents. A stand-alone SVG document uses XML 1.0 syntax, which specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.