-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
81 lines (66 loc) · 2.97 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
---
title: color-interpolation-filters
slug: Web/SVG/Attribute/color-interpolation-filters
page-type: svg-attribute
browser-compat: svg.global_attributes.color-interpolation-filters
---
{{SVGRef}}
The **`color-interpolation-filters`** attribute specifies the color space for imaging operations performed via filter effects.
> [!NOTE]
> This property just has an affect on filter operations. Therefore, it has no effect on filter primitives like {{SVGElement("feOffset")}}, {{SVGElement("feImage")}}, {{SVGElement("feTile")}} or {{SVGElement("feFlood")}}.
>
> `color-interpolation-filters` has a different initial value than {{SVGAttr("color-interpolation")}}. `color-interpolation-filters` has an initial value of `linearRGB`, whereas `color-interpolation` has an initial value of `sRGB`. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.
>
> It has no affect on filter functions, which operate in the {{Glossary("RGB", "sRGB")}} color space.
> [!NOTE]
> As a presentation attribute, `color-interpolation-filters` can be used as a CSS property. See {{cssxref('color-interpolation-filters')}} for more.
You can use this attribute with the following SVG elements:
- {{SVGElement("feSpotLight")}}
- {{SVGElement("feBlend")}}
- {{SVGElement("feColorMatrix")}}
- {{SVGElement("feComponentTransfer")}}
- {{SVGElement("feComposite")}}
- {{SVGElement("feConvolveMatrix")}}
- {{SVGElement("feDiffuseLighting")}}
- {{SVGElement("feDisplacementMap")}}
- {{SVGElement("feDropShadow")}}
- {{SVGElement("feFlood")}}
- {{SVGElement("feGaussianBlur")}}
- {{SVGElement("feImage")}}
- {{SVGElement("feMerge")}}
- {{SVGElement("feMorphology")}}
- {{SVGElement("feOffset")}}
- {{SVGElement("feSpecularLighting")}}
- {{SVGElement("feTile")}}
- {{SVGElement("feTurbulence")}}
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td><code>auto</code> | <code>sRGB</code> | <code>linearRGB</code></td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>linearRGB</code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>discrete</td>
</tr>
</tbody>
</table>
- `auto`
- : 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.
- `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](https://webstore.iec.ch/en/publication/6169).
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- SVG {{SVGAttr("color-interpolation")}} attribute
- CSS {{cssxref('color-interpolation-filters')}} property
- [sRGB specification](https://webstore.iec.ch/en/publication/6169)