SVG <feComponentTransfer> Filter

Last Updated:

What is <feComponentTransfer> Filter?

The <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, thresholding or color balance.

Example

Default Identity Table lookup Linear function Gamma function
HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> rect{ fill: url(#rainbow); } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.3" stop-color="#ffff00"></stop> <stop offset="0.6" stop-color="#00ff00"></stop> <stop offset="0.9" 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> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.

Share this Page

Meet the Author