Attributes
Vachmi
The <feComponentTransfer> SVG primitive performs color-component-wise remapping of data for each pixel.
It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
The feComponentTransfer primitive provides a way to manipulate each of the four color channels separately.
To operate on each of the RGBA channels separately, feComponentTransfer takes a number of subelements,
which are the transfer functions, feFuncR, feFuncG, feFuncB, and feFuncA.
Each transfer function has a 'type' attribute and depending on the value of 'type', it takes some additional attributes.
Attribute
Description
in
Identifies the input for the given filter primitive
type
Specifies the type of matrix operation.
Possible values are
• identity - sets the resulting value equal to the input value. In other words it does not make any changes to the image.
• table - maps equal segments of a color channel to output ranges which are set using supplied values
• discrete - maps equal segments of a color channel to specific output values set using supplied values
• linear - applies a linear formula to change color values
• gamma - applies a gamma function to change color values
Possible values are
• identity - sets the resulting value equal to the input value. In other words it does not make any changes to the image.
• table - maps equal segments of a color channel to output ranges which are set using supplied values
• discrete - maps equal segments of a color channel to specific output values set using supplied values
• linear - applies a linear formula to change color values
• gamma - applies a gamma function to change color values
Here is the SVG code to draw this filter with type="table".
<svg id='feComponentTransfer1' fill='none' xmlns='http://www.w3.org/2000/svg' width="150" height="150" viewBox='0 0 150 150'>
<defs>
<filter id="filter1">
<feComponentTransfer>
<feFuncG type="table" tableValues="0.0 0.15 0.8 1.0" />
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="../images/base-image-2.jpg" width="100%" height="100%" filter="url(#filter1)"/>
</svg>
<defs>
<filter id="filter1">
<feComponentTransfer>
<feFuncG type="table" tableValues="0.0 0.15 0.8 1.0" />
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="../images/base-image-2.jpg" width="100%" height="100%" filter="url(#filter1)"/>
</svg>