color-interpolation

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

Thecolor-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 thecolor-interpolation property on the child determines the type of blending, not the value of thecolor-interpolation on the parent. For gradients which make use of thehref or the deprecatedxlink:href attribute to reference another gradient, the gradient uses the property's value from the gradient element which is directly referenced by thefill orstroke property. When animating colors, color interpolation is performed according to the value of thecolor-interpolation property on the element being animated.

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

You can use this attribute with the following SVG elements:

Usage notes

Value	`auto` \|`sRGB` \|`linearRGB`
Default value	`sRGB`
Animatable	discrete

auto: Indicates that the user agent can choose either thesRGB orlinearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.
sRGB: Indicates that color interpolation should occur in the sRGB color space.
linearRGB: Indicates that color interpolation should occur in the linearized RGB color space as described inthe sRGB specification.

Example

This example shows four SVGs, each with a<rect> element and a different gradient used as a fill for the<rect>. The first two SVGs use<linearGradient> and the second two use<radialGradient> elements. In unsupported browsers, the gradient looks the same.

In this first SVG, thecolor-interpolation attribute is not included on the<linearGradient> element, which defaults tosRGB.

svg {  display: block;}

html

<svg width="450" height="70">  <title>    Example of linearGradient excluding the color-interpolation attribute  </title>  <defs>    <linearGradient>      <stop offset="0%" stop-color="white" />      <stop offset="25%" stop-color="blue" />      <stop offset="50%" stop-color="white" />      <stop offset="75%" stop-color="red" />      <stop offset="100%" stop-color="white" />    </linearGradient>  </defs>  <rect    x="0"    y="0"    width="400"    height="40"    fill="url(#gradientDefault)"    stroke="black" />  <text x="0" y="60" font-family="courier" font-size="16">    color-interpolation not set  </text></svg>

In this second SVG, thecolor-interpolation attribute is included on the<linearGradient> element and set tolinearRGB.

html

<svg width="450" height="70">  <title>    Example of linearGradient using the color-interpolation attribute  </title>  <defs>    <linearGradient color-interpolation="linearRGB">      <stop offset="0%" stop-color="white" />      <stop offset="25%" stop-color="blue" />      <stop offset="50%" stop-color="white" />      <stop offset="75%" stop-color="red" />      <stop offset="100%" stop-color="white" />    </linearGradient>  </defs>  <rect    x="0"    y="0"    width="400"    height="40"    fill="url(#gradientLinearRGB)"    stroke="black" />  <text x="0" y="60" font-family="courier" font-size="16">    color-interpolation="linearRGB"  </text></svg>

In this third SVG, thecolor-interpolation attribute is not included on the<radialGradient> element, which defaults tosRGB.

html

<svg width="450" height="70">  <title>    Example of radialGradient excluding the color-interpolation attribute  </title>  <defs>    <radialGradient>      <stop offset="0%" stop-color="red" />      <stop offset="100%" stop-color="gold" />    </radialGradient>  </defs>  <rect x="0" y="0" width="400" height="40" fill="url(#none)" stroke="black" />  <text x="0" y="60" font-family="courier" font-size="16">    color-interpolation not set  </text></svg>

In this fourth SVG, thecolor-interpolation attribute is included on the<radialGradient> element and set tolinearRGB.

html

<svg width="450" height="70">  <title>    Example of radialGradient using the color-interpolation attribute  </title>  <defs>    <radialGradient color-interpolation="linearRGB">      <stop offset="0%" stop-color="red" />      <stop offset="100%" stop-color="gold" />    </radialGradient>  </defs>  <rect    x="0"    y="0"    width="400"    height="40"    fill="url(#radLinearRGB)"    stroke="black" />  <text x="0" y="60" font-family="courier" font-size="16">    color-interpolation="linearRGB" (SVG attr)  </text></svg>