Firefox Tomorrow

svg attribute

color

View on MDN ↗

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,
body,
svg {
  height: 100%;
}

<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>
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also