« SVG Attribute reference home

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

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css color for further information.

Usage context

Categories Presentation attribute
Value <color> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)


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


The following elements can use the color attribute

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Contributors to this page: a-mt, connorshea, jalbertbowden, Jeremie
Last updated by: a-mt,