color

{{SVGRef}} 

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

[!NOTE] As a presentation attribute, color also has a CSS property counterpart: {{cssxref("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

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>

{{EmbedLiveSample("Example", "100%", "110")}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• CSS {{cssxref("color")}}  property