color-interpolation
The color-interpolation
CSS property is used in SVG to specify which color space to use for <linearGradient>
and <radialGradient>
SVG elements.
Syntax
/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;
Values
auto
-
Indicates that the user agent can choose either the
sRGB
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. Defaults to this initial value if no
color-interpolation
property is set. linearRGB
-
Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.
Formal definition
Value | auto | sRGB | linearRGB |
---|---|
Applies to | <linearGradient> and <radialGradient> |
Default value | auto |
Animatable | discrete |
Formal syntax
Example
In the first SVG, the color-interpolation
property is not included on the <linearGradient>
element and color interpolation defaults to sRGB
.
The second example shows color interpolation using the linearRGB
value.
<svg width="450" height="70">
<title>Example of using the color-interpolation CSS Property</title>
<defs>
<linearGradient id="sRGB">
<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(#sRGB)" stroke="black" />
<text x="0" y="60" font-family="courier" font-size="16">
no color-interpolation (CSS property)
</text>
</svg>
<svg width="450" height="70">
<title>Example of using the color-interpolation CSS Property</title>
<defs>
<linearGradient id="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(#linearRGB)"
stroke="black" />
<text x="0" y="60" font-family="courier" font-size="16">
color-interpolation: linearRGB; (CSS property)
</text>
</svg>
svg {
display: block;
}
#linearRGB {
color-interpolation: linearRGB;
}
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ColorInterpolation |
Browser compatibility
BCD tables only load in the browser