color

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.

The color attribute is used to provide a potential indirect value, currentcolor, for the fill, stroke, stop-color, flood-color, and lighting-color attributes.

Note: As a presentation attribute, color also has a CSS property counterpart: color. When both are specified, the CSS property takes priority.

Technically, color can be applied to any element, but it has no direct effect on SVG elements.

Usage notes

Value <color> | inherit
Default value Depends on user agent
Animatable Yes

Example

html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g color="green">
    <rect width="50" height="50" fill="currentcolor" />
    <circle
      r="25"
      cx="70"
      cy="70"
      stroke="currentcolor"
      fill="none"
      stroke-width="5" />
  </g>
</svg>

Specifications

Specification
CSS Color Module Level 4
# the-color-property
Scalable Vector Graphics (SVG) 2
# ColorProperty

Browser compatibility

BCD tables only load in the browser

See also