SVG <feComponentTransfer> Element (original) (raw)

Last Updated : 31 Mar, 2022

• SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
• element implements color manipulations on each color channel separately.
• The four color channel of this element are , ,, and .
• While performing color manipulations the element should only have one child element of each type.

Syntax:

Attributes :

• in - It store input for the given primitive.

Example 1:

HTML `

  <feComponentTransfer>
    <feFuncA type="table" tableValues="0 0 1 1"/>
    <feFuncB type="table" tableValues="0 1 0 1"/>
    <feFuncG type="table" tableValues="1 1 0 0"/>
    <feFuncR type="table" tableValues="0 0 1 0"/>
</feComponentTransfer>

</filter>

`

Output :

Example 2:

HTML `

      <feComponentTransfer in="BackgroundImage" result="A">
    <feFuncA type="discrete" tableValues="0 0 1 1"/>
    <feFuncB type="discrete" tableValues="0.0 0.6 0.1 0.0"/>
    <feFuncG type="discrete" tableValues="1 0.5 0.5 0.5"/>
    <feFuncR type="discrete" tableValues="0.5 1 1 1.0"/>
    
  </feComponentTransfer>


</filter>

`

Output :

Example 3 :

HTML `

      <feComponentTransfer in="BackgroundImage" result="A">
    <feFuncA type="table" tableValues="0 0 1 1"/>
    <feFuncB type="discrete" tableValues="0 1 1 0"></feFuncB>
    <feFuncG type="gamma" amplitude="3" exponent="3" offset="0"></feFuncG>
    <feFuncR type="linear" slope="1.5" intercept="2"></feFuncR>
    
  </feComponentTransfer>


</filter>

`

Output :