-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
210 lines (181 loc) · 6.8 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
---
title: color-interpolation
slug: Web/SVG/Attribute/color-interpolation
page-type: svg-attribute
browser-compat: svg.global_attributes.color-interpolation
---
{{SVGRef}}
The **`color-interpolation`** attribute specifies the color space for gradient interpolations, color animations, and alpha compositing.
> [!NOTE]
> For filter effects, the {{SVGAttr("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 {{SVGAttr("href")}} or the deprecated {{SVGAttr("xlink:href")}} attribute to reference another gradient, the gradient uses the property's value from the gradient element which is directly referenced by the {{SVGAttr("fill")}} or {{SVGAttr("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, {{CSSXref("color-interpolation")}} can be used as a CSS property.
You can use this attribute with the following SVG elements:
- {{SVGElement("a")}}
- {{SVGElement("animate")}}
- {{SVGElement("circle")}}
- {{SVGElement("clipPath")}}
- {{SVGElement("defs")}}
- {{SVGElement("ellipse")}}
- {{SVGElement("foreignObject")}}
- {{SVGElement("g")}}
- {{SVGElement("glyph")}}
- {{SVGElement("image")}}
- {{SVGElement("line")}}
- {{SVGElement("linearGradient")}}
- {{SVGElement("marker")}}
- {{SVGElement("mask")}}
- {{SVGElement("missing-glyph")}}
- {{SVGElement("path")}}
- {{SVGElement("pattern")}}
- {{SVGElement("polygon")}}
- {{SVGElement("polyline")}}
- {{SVGElement("radialGradient")}}
- {{SVGElement("rect")}}
- {{SVGElement("svg")}}
- {{SVGElement("switch")}}
- {{SVGElement("symbol")}}
- {{SVGElement("text")}}
- {{SVGElement("textPath")}}
- {{SVGElement("tspan")}}
- {{SVGElement("use")}}
## 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>sRGB</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).
## Example
This example shows four SVGs, each with a {{SVGElement("rect")}} element and a different gradient used as a fill for the `<rect>`. The first two SVGs use {{SVGElement("linearGradient")}} and the second two use {{SVGElement("radialGradient")}} elements. In unsupported browsers, the gradient looks the same.
In this first SVG, the `color-interpolation` attribute is not included on the `<linearGradient>` element, which defaults to `sRGB`.
```css hidden
svg {
display: block;
}
```
```html
<svg width="450" height="70">
<title>
Example of linearGradient excluding the color-interpolation attribute
</title>
<defs>
<linearGradient id="gradientDefault">
<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, the `color-interpolation` attribute is included on the `<linearGradient>` element and set to `linearRGB`.
```html
<svg width="450" height="70">
<title>
Example of linearGradient using the color-interpolation attribute
</title>
<defs>
<linearGradient id="gradientLinearRGB" 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, the `color-interpolation` attribute is not included on the `<radialGradient>` element, which defaults to `sRGB`.
```html
<svg width="450" height="70">
<title>
Example of radialGradient excluding the color-interpolation attribute
</title>
<defs>
<radialGradient id="none">
<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, the `color-interpolation` attribute is included on the `<radialGradient>` element and set to `linearRGB`.
```html
<svg width="450" height="70">
<title>
Example of radialGradient using the color-interpolation attribute
</title>
<defs>
<radialGradient id="radLinearRGB" 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>
```
{{EmbedLiveSample("Example", "100%", "280")}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{SVGElement("linearGradient")}}
- {{SVGElement("radialGradient")}}
- {{CSSXref("color-interpolation")}}
- [sRGB specification](https://webstore.iec.ch/en/publication/6169)
- {{SVGAttr("color-interpolation-filters")}}
- [Computer color is broken](https://www.youtube.com/watch?v=LKnqECcg6Gw) - popular demonstration of linearRGB