<feComponentTransfer>

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

CategoriesFilter primitive element
Permitted contentAny 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="http://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) (Yes) (Yes) (Yes) (Yes) ?
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?

See also

Document Tags and Contributors

 Contributors to this page: abbycar, Sebastianz, kscarfone, Jeremie, Manuel_Strehl
 Last updated by: abbycar,