id

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

The id attribute assigns a unique name to an element.

All elements are using this attribute.

<svg width="120" height="120" viewPort="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    <![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 Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'id' in that specification.
Candidate Recommendation Defines the allowed values in more detail.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'id' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
classChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
Animation supportChrome ? Edge ? Firefox Full support 5IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Full support 5Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also