CSS Features

Candidate Recommendation Snapshot · SVG

Scalable Vector Graphics (SVG)

24 properties defined by this specification, all known to at least one browser .

Modern CSS features in this module: paint-order.

Read the Editor's Draft ↗ W3C Candidate Recommendation Snapshot ↗

Each feature in detail

color-interpolation

Property Baseline: widely availablesince July 2022

MDN The color-interpolation CSS property is used in SVG to specify which color space to use for linearGradient and radialGradient SVG elements.

Syntax

auto | sRGB | linearRGB

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
sRGB
Applies to
container elements, graphics elements, gradient elements, ‘use’ and ‘animate’
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 1
Edge 79
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

cx

Property Baseline: widely availablesince July 2022

MDN The cx CSS property defines the x-axis center point of an SVG circle or ellipse element. If present, it overrides the element's cx attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

circle:first-of-type {
  cx: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cx: 180px;
  fill: pink;
  stroke: black;
}

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
‘circle’ and ‘ellipse’ elements
Inherited
no
Percentages
refer to the width of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 43
Edge 79
Firefox 69
Safari 9
Chrome Android 43
Safari iOS 9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

cy

Property Baseline: widely availablesince July 2022

MDN The cy CSS property defines the y-axis center point of an SVG circle or ellipse elements. If present, it overrides the element's cy attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

circle:first-of-type {
  cy: 30px;
  fill: lightgreen;
  stroke: black;
}
ellipse:first-of-type {
  cy: 100px;
  fill: pink;
  stroke: black;
}

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
‘circle’ and ‘ellipse’ elements
Inherited
no
Percentages
refer to the height of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 43
Edge 79
Firefox 69
Safari 9
Chrome Android 43
Safari iOS 9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

d

Property Baseline: widely availablesince July 2022

MDN The d CSS property defines a path to be drawn by the SVG path element. If present, it overrides the element's d attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

path {
  fill: #ff333388;
  stroke: black;
}

path:last-of-type {
  d: path(
    "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z"
  );
}

Syntax

none | <string>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
‘path’
Inherited
no
Percentages
N/A
Computed value
as specified
Animation type
See prose

Browser support

Chrome 52
Edge 79
Firefox 97
Safari No
Chrome Android 52
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

fill

Property Baseline: widely availablesince July 2022

MDN The fill CSS property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. If present, it overrides the element's fill attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

Syntax

<paint>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
black
Applies to
shapes and text content elements
Inherited
yes
Percentages
N/A
Computed value
as specified, but with <color> values computed and <url> values made absolute
Animation type
by computed value

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

marker

Property Baseline: widely availablesince July 2022

MDN The marker CSS property points to a marker that will be drawn on the first, middle, and last vertices of the element's path; that is, at all of its vertices. The marker must have been defined using an SVG element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-start, marker, and marker-end attributes in the SVG.

Syntax

none | <marker-ref>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
not defined for shorthand properties
Applies to
shapes
Inherited
yes
Percentages
N/A
Computed value
see individual properties
Animation type
discrete
Longhands
marker-start, marker-mid, marker-end

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

marker-end

Property Baseline: widely availablesince July 2022

MDN The marker-end CSS property points to a marker that will be drawn on the last vertex of the element's path; that is, at its ending vertex. The marker must have been defined using an SVG element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-end attribute in the SVG.

Syntax

none | <marker-ref>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
shapes
Inherited
yes
Percentages
N/A
Computed value
as specified, but with <url> values (that are part of a <marker-ref>) made absolute
Animation type
discrete

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

marker-mid

Property Baseline: widely availablesince July 2022

MDN The marker-mid CSS property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-mid attribute in the SVG.

Syntax

none | <marker-ref>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
shapes
Inherited
yes
Percentages
N/A
Computed value
as specified, but with <url> values (that are part of a <marker-ref>) made absolute
Animation type
discrete

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

marker-start

Property Baseline: widely availablesince July 2022

MDN The marker-start CSS property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-start attribute in the SVG.

Syntax

none | <marker-ref>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
shapes
Inherited
yes
Percentages
N/A
Computed value
as specified, but with <url> values (that are part of a <marker-ref>) made absolute
Animation type
discrete

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

paint-order

Property Baseline: widely availablesince September 2026 Modern CSS: paint-order

MDN The paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.

Live preview Example from MDN 
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}

Syntax

normal | [ fill || stroke || markers ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
normal
Applies to
shapes and text content elements
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 123
Edge 123
Firefox 60
Safari 11
Chrome Android 123
Safari iOS 11

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

path-length

Property Experimental

MDN The path-length CSS property specifies a total path length, in user units. All path computations are then scaled using the ratio path-length / (computed value of path length) — this includes text paths, animation paths, and various stroke operations.

Live preview Example from MDN 
path {
  path-length: 500px;
}

Syntax

none | <length [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
‘path’, ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’
Inherited
no
Percentages
N/A
Computed value
the keyword none, or an absolute length
Animation type
by computed value

Browser support

Chrome 149 (flag)
Edge 149 (flag)
Firefox No
Safari No
Chrome Android 149 (flag)
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

pointer-events

Property Baseline: widely availablesince January 2018

MDN The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Live preview Example from MDN 
#example-element {
  font-weight: bold;
}

#example-element a {
  color: #009e5f;
}

#example-element svg {
  width: 10em;
  height: 10em;
}

Syntax

auto | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
container elements, graphics elements and ‘use’
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 1
Edge 12
Firefox 1.5
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

r

Property Baseline: widely availablesince July 2022

MDN The r CSS property defines the radius of a circle. It can only be used with the SVG circle element. If present, it overrides the circle's r attribute.

Live preview Example from MDN 
svg {
  border: 1px solid black;
}

circle:first-of-type {
  r: 30px;
  fill: lightgreen;
  stroke: black;
}

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
‘circle’ element
Inherited
no
Percentages
refer to the normalized diagonal of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 43
Edge 79
Firefox 69
Safari 9
Chrome Android 43
Safari iOS 9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

rx

Property Baseline: widely availablesince July 2022

MDN The rx CSS property defines the x-axis, or horizontal, radius of an SVG ellipse and the horizontal curve of the corners of an SVG rect rectangle. If present, it overrides the shape's rx attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  rx: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  rx: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  rx: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  rx: 80%;
  fill: green;
}

Syntax

<length-percentage> | auto

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
‘ellipse’, ‘rect’ elements
Inherited
no
Percentages
refer to the width of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 43
Edge 79
Firefox 69
Safari 17.4
Chrome Android 43
Safari iOS 17.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

ry

Property Baseline: widely availablesince July 2022

MDN The ry CSS property defines the y-axis, or vertical, radius of an SVG ellipse and the vertical curve of the corners of an SVG rect rectangle. If present, it overrides the shape's ry attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

rect:nth-of-type(2) {
  ry: 10px;
  fill: red;
}

rect:nth-of-type(3) {
  ry: 2em;
  fill: blue;
}

rect:nth-of-type(4) {
  ry: 5%;
  fill: orange;
}

rect:nth-of-type(5) {
  ry: 80%;
  fill: green;
}

Syntax

<length-percentage> | auto

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
‘ellipse’, ‘rect’
Inherited
no
Percentages
refer to the height of the current SVG viewport (see Units)
Computed value
an absolute length or percentage

Browser support

Chrome 43
Edge 79
Firefox 69
Safari 17.4
Chrome Android 43
Safari iOS 17.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

shape-rendering

Property Baseline: widely availablesince July 2022

MDN The shape-rendering CSS property provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. It only has an effect on the circle, ellipse, line, path, polygon, polyline, and rect elements. If explicitly declared, the value of the CSS property overrides the any values of the element's shape-rendering attribute.

Syntax

auto | optimizeSpeed | crispEdges | geometricPrecision

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
shapes
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 1
Edge 79
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

stop-color

Property Baseline: widely availablesince July 2022

MDN The stop-color CSS property defines the color to use for an SVG stop element within a gradient. If present, it overrides the element's stop-color attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

rect {
  stroke: #333333;
  stroke-width: 1px;
}

#myGradient1 {
  stop:first-of-type {
    stop-color: #66ccff;
  }
  stop:last-of-type {
    stop-color: #f4aab9;
  }
}
#myGradient2 {
  stop:first-of-type {
    stop-color: yellow;
  }
  stop:last-of-type {
    stop-color: purple;
  }
}
#myGradient3 {
  stop:first-of-type {
    stop-color: hsl(0deg 90% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 60% 50%);
  }
}

Syntax

<'color'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

stop-opacity

Property Baseline: widely availablesince July 2022

MDN The stop-opacity CSS property defines the opacity of a given color gradient stop in the SVG stop element within an SVG gradient. If present, it overrides the element's stop-opacity attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
  background: repeating-linear-gradient(
    to top left,
    white 0 9px,
    black 9px 10px
  );
}

polygon {
  stroke: #333333;
  stroke-width: 1px;
}
polygon:nth-of-type(1) {
  fill: url("#myGradient1") magenta;
}
polygon:nth-of-type(2) {
  fill: url("#myGradient2") magenta;
}
polygon:nth-of-type(3) {
  fill: url("#myGradient3") magenta;
}

#myGradient1 stop {
  stop-opacity: 1;
}
#myGradient2 stop {
  stop-opacity: 0.8;
}
#myGradient3 stop {
  stop-opacity: 25%;
}

Syntax

<'opacity'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 1
Edge ≤15
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

stroke

Property Baseline: widely availablesince July 2022

MDN The stroke CSS property defines the color or SVG paint server used to draw an element's stroke. As such, stroke only has an effect on elements that can be given a stroke (for example, or ); see the page on the SVG attribute for a complete list. When declared, the CSS value overrides any value of the element's stroke SVG attribute.

Live preview Example from MDN 
rect {
  stroke: rebeccapurple;
}
circle {
  stroke: red;
}

Syntax

<paint>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
shapes and text content elements
Inherited
yes
Percentages
N/A
Computed value
as specified, but with <color> values computed and <url> values made absolute
Animation type
by computed value

Browser support

Chrome 1
Edge ≤15
Firefox 1.5
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

text-anchor

Property Baseline: widely availablesince July 2022

MDN The text-anchor CSS property aligns a box containing a string of text where the wrapping area is determined from the inline-size property, and the text is then placed relative to the anchor point of the element, which is defined using the and (or and ) attributes. If present, the value of the CSS property overrides any value of the element's text-anchor attribute.

Syntax

start | middle | end

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
start
Applies to
text content elements
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 1
Edge ≤14
Firefox 3
Safari 4
Chrome Android 18
Safari iOS 3.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

text-rendering

Property Baseline: widely availablesince July 2022

MDN The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.

Live preview Example from MDN 
.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

Syntax

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
auto
Applies to
‘text’
Inherited
yes
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 4
Edge 79
Firefox 1
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

vector-effect

Property Baseline: widely availablesince July 2022

MDN The vector-effect CSS property suppresses specific transformation effects in SVG, thus permitting effects like a road on a map staying the same width no matter how the map is zoomed, or allowing a diagram key to retain its position and size regardless of other transforms. It can only be used with SVG elements that accept the vector-effect attribute. When used, the CSS value overrides any values of the element's vector-effect attribute.

Live preview Example from MDN 
svg {
  width: 500px;
}
svg rect.thinned {
  vector-effect: non-scaling-stroke;
}

Syntax

none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
graphics elements and ‘use’
Inherited
no
Percentages
N/A
Computed value
as specified
Animation type
discrete

Browser support

Chrome 6
Edge 79
Firefox 15
Safari 5.1
Chrome Android 18
Safari iOS 5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

x

Property Baseline: widely availablesince July 2022

MDN The x CSS property defines the x-axis coordinate of the top left corner of the SVG rect shape, image image, foreignObject viewport or nested svg viewport relative to the nearest <svg> ancestor's user coordinate system. If present, it overrides the element's x attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
  width: 300px;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  x: 3em;
  fill: red;
}

rect:nth-of-type(3) {
  x: 180px;
  fill: yellow;
}

rect:nth-of-type(4) {
  x: 50%;
  fill: orange;
}

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
‘svg’, ‘rect’, ‘image’, ‘foreignObject’ elements
Inherited
no
Percentages
refer to the width of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 42
Edge 79
Firefox 69
Safari 9
Chrome Android 42
Safari iOS 9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

y

Property Baseline: widely availablesince July 2022

MDN The y CSS property defines the y-axis coordinate of the top left corner of the SVG rect shape, image image, foreignObject viewport and nested svg viewport relative to the nearest <svg> ancestor's user coordinate system. If present, it overrides the element's y attribute.

Live preview Example from MDN 
svg {
  border: 1px solid;
}

rect {
  fill: none;
  stroke: black;
  opacity: 0.8;
}

rect:nth-of-type(2) {
  y: -20px;
  fill: red;
}

rect:nth-of-type(3) {
  y: 4em;
  fill: yellow;
}

rect:nth-of-type(4) {
  y: 60%;
  fill: orange;
}

Syntax

<length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
‘svg’, ‘rect’, ‘image’, ‘foreignObject’ elements
Inherited
no
Percentages
refer to the height of the current SVG viewport (see Units)
Computed value
an absolute length or percentage
Animation type
by computed value

Browser support

Chrome 42
Edge 79
Firefox 69
Safari 9
Chrome Android 42
Safari iOS 9

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗