SVG <feComponentTransfer> Element

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

Syntax:

<feComponentTransfer in="">
----
</feComponentTransfer>

Attributes :

in - It store input for the given primitive.

Example 1:

HTML

<html> 
<title>SVG Filter</title> 
<body> 
        
<svg width="640" height="550" viewBox="0 0 640 550">
<defs>
    <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">

      <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>
  </defs>
  
  <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" 
                       xlink:href="C:/Users/pc/Desktop/gfg/Capture25.png"/>
  <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" 
         filter="url(#new)" xlink:href="C:/Users/pc/Desktop/gfg/Capture25.png"/>
</svg>

    
</body> 
</html>

Output :

Example 2:

HTML

<html> 
<title>SVG Filter</title> 
<body> 
        
<svg width="640" height="550" viewBox="0 0 640 550">
<defs>
    <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">

     
          <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>
  </defs>
  
  <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" 
                       xlink:href="C:/Users/pc/Desktop/gfg/Capture82.png"/>
  <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" 
  xlink:href="C:/Users/pc/Desktop/gfg/Capture82.png"/>
</svg>

    
</body> 
</html>

Output :

Example 3 :

HTML

<html> 
<title>SVG Filter</title> 
<body> 
        
<svg width="640" height="550" viewBox="0 0 640 550">
<defs>
    <filter id="new" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">

     
          <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>
  </defs>
  
  <image x="10" y="10" width="280" height="350" preserveAspectRatio="true" 
                       xlink:href="C:/Users/pc/Desktop/gfg/Capture26.png"/>
  <image x="310" y="10" width="280" height="350" preserveAspectRatio="true" filter="url(#new)" 
  xlink:href="C:/Users/pc/Desktop/gfg/Capture26.png"/>
</svg>

    
</body> 
</html>

Output :

SVG <feComponentTransfer> Element

Explore