SVG <feFuncA> Element

Last Updated : 04 Aug, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

SVG <feFunA> Element: These elements are typically children of the feComponentTransfer element and specify the transfer function in which the alpha component (defines the transparency of the colour) of the input graphic of its parent <feComponentTransfer> element.

Syntax:

<feComponentTransfer>      
    <feFuncA type="" tableValues=""/>
</feComponentTransfer>

Attributes: It does not have any specified attribute but it accepts Global attributes.

Example 1:The following code demonstrates the <feFuncA> element with the type “table”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncA Element</title> 
</head> 
  
<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="1 0 1 1" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" 
            preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" /> 
        <image x="310" y="10" width="280" 
            height="350" preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" /> 
    </svg> 
</body> 
  
</html>

Output:

Example 2: The following code demonstrates the <feFuncA> element with the type “gamma”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncA Element</title> 
</head> 
  
<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="gamma" 
                        amplitude="0" 
                        eponent="1" offset="0.5" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" 
            preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> 
        <image x="310" y="10" width="280" 
            height="350" 
            preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> 
    </svg> 
</body> 
  
</html>

Output:

Example 3: The following code demonstrates the <feFuncA> element with the type “discrete” and attributes like “amplitude”,”exponent”,”offset” are set with values.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncA Element</title> 
</head> 
  
<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="1 1 0 1" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" 
            preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" /> 
        <image x="310" y="10" width="280" 
            height="350" 
            preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" /> 
    </svg> 
</body> 
  
</html>