color-interpolation
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.
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 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.
linearRGB
-
Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # ColorInterpolation |
Browser compatibility
BCD tables only load in the browser
See also
- sRGB specification
color-interpolation-filters
- Computer color is broken - popular demonstration of linearRGB