W3cubDocs

/SVG

id

The id attribute assigns a unique name to an element.

You can use this attribute with any SVG element.

Example

<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 id="smallRect" 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 of id 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.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# Core.attrib

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
id Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/id