Th <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children <feFuncR>, <feFuncB>, <feFuncG>, and <feFuncA> return.
Usage context
| Categories | Filter primitive element |
|---|---|
| Permitted content | Any number of the following elements, in any order:<feFuncA>, <feFuncR>, <feFuncB>, <feFuncG> |
Attributes
Global attributes
Specific attributes
DOM Interface
This element implements the SVGFEComponentTransferElement interface.
Example
SVG
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 300">
<defs>
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0" stop-color="#ff0000"></stop>
<stop offset="0.2" stop-color="#ffff00"></stop>
<stop offset="0.4" stop-color="#00ff00"></stop>
<stop offset="0.6" stop-color="#00ffff"></stop>
<stop offset="0.8" stop-color="#0000ff"></stop>
<stop offset="1" stop-color="#800080"></stop>
</linearGradient>
<filter id="identity" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"></feFuncR>
<feFuncG type="identity"></feFuncG>
<feFuncB type="identity"></feFuncB>
<feFuncA type="identity"></feFuncA>
</feComponentTransfer>
</filter>
<filter id="table" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
<feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
<feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="linear" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
<feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
<feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
</feComponentTransfer>
</filter>
<filter id="gamma" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
<feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
<feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
</feComponentTransfer>
</filter>
</defs>
<g font-weight="bold">
<text x="0" y="5%">Default</text>
<rect x="0" y="8%" width="100%" height="20"></rect>
<text x="0" y="26%">Identity</text>
<rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect>
<text x="0" y="47%">Table lookup</text>
<rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect>
<text x="0" y="68%">Linear function</text>
<rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect>
<text x="0" y="89%">Gamma function</text>
<rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect>
</g>
</svg>
CSS
rect {
fill: url(#rainbow);
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Filter Effects Module Level 1 The definition of '<feComponentTransfer>' in that specification. |
Working Draft | Specified that missing transfer function elements are treated like they were specified with their type attributes set to identity. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<feComponentTransfer>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | 20 or earlier (12.10049) | (Yes) | (Yes) | (Yes) | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |