- 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 :