The id attribute assigns a unique name to an element.

All elements are using this attribute.

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
      #smallRect {
        stroke: #000066;
        fill: #00cc00;

  <rect id="smallRect" x="10" y="10" width="100" height="100" />

Usage notes

Value <id>
Default value None
Animatable No

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.


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 compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
class Yes 12 Yes Yes Yes Yes
Animation support ? ? 5 ? ? ?
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
class Yes Yes Yes Yes Yes Yes
Animation support ? ? 5 ? ? ?

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.