class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

« SVG Attribute reference home

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
<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

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# ElementSpecificStyling

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
class
Animation support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support