This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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:
You can use this class to style SVG content using CSS.
| Categories | None |
|---|---|
| Value | <list-of-class-names> |
| Animatable | Yes |
<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>
The following elements can use the class attribute:
<a><circle><clipPath><defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><foreignObject><g><image><line><linearGradient><marker><mask><path><pattern><polygon><polyline><radialGradient><rect><stop><svg><switch><symbol><text><textPath><title><tspan><use>| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
class |
1 | 12 | 1 | 15 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 | 1 |
animation_support |
5 | 79 | 5 | 15 | 4 | 18 | 5 | 14 | 3.2 | 1.0 | 4.4 | 3.2 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/class