The color-interpolation attribute specifies the color space for gradient interpolations, color animations, and alpha compositing.

Note: For filter effects, the color-interpolation-filters property controls which color space is used.

The color-interpolation property chooses between color operations occurring in the sRGB color space or in a (light energy linear) linearized RGB color space. Having chosen the appropriate color space, component-wise linear interpolation is used.

When a child element is blended into a background, the value of the color-interpolation property on the child determines the type of blending, not the value of the color-interpolation on the parent. For gradients which make use of the href or the deprecated xlink:href attribute to reference another gradient, the gradient uses the propertyʼs value from the gradient element which is directly referenced by the fill or stroke property. When animating colors, color interpolation is performed according to the value of the color-interpolation property on the element being animated.

Note: As a presentation attribute, color-interpolation can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animateColor>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <glyph>, <image>, <line>, <linearGradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialGradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, and <use>

Usage notes

Value auto | sRGB | linearRGB
Default value sRGB
Animatable Yes
Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.
Indicates that color interpolation should occur in the sRGB color space.
Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.


Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'color-interpolation' in that specification.
Candidate Recommendation No significant change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'color-interpolation' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
color-interpolationChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown

See also