SVG <feComponentTransfer> Filter

You are Here:

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
inSpecifies the input for the given filter primitive.

Reminder

Hi Developers, we almost covered 91% of SVG Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in SVG.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author