W3cubDocs

/SVG

class

Assigns a class name or set of class names to an element. You may assign the same class name or names to any number of elements, however, multiple class names must be separated by whitespace characters.

An element's class name serves two key roles:

  • As a style sheet selector, for when an author assigns style information to a set of elements.
  • For general use by the browser.

You can use this class to style SVG content using CSS.

Usage context

Categories None
Value <list-of-class-names>
Animatable Yes
Normative document SVG 1.1 (2nd Edition): The class attribute

Example

<html lang="en">
  <body>
    <svg
      width="120"
      height="220"
      viewPort="0 0 120 120"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg">
      <style><![CDATA[
            rect.rectClass {
                stroke: #000066;
                fill:   #00cc00;
            }
            circle.circleClass {
                stroke: #006600;
                fill:   #cc0000;
            }
        ]]></style>

      <rect class="rectClass" x="10" y="10" width="100" height="100" />
      <circle class="circleClass" cx="40" cy="50" r="26" />
    </svg>
  </body>
</html>

Elements

The following elements can use the class attribute:

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
class Yes 12 Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
animation_support No No 5 No No No No No 5 No No No

© 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/class