Open In App

SVG <feComponentTransfer> Element

Improve
Improve
Like Article
Like
Save
Share
Report
  • 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 :



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads