SVG <feFuncR> Element

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

In this article, we will learn about the <feFuncR> element which is an SVG filter primitive that is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element. <feComponentTransfer> element implements color manipulations on each color channel separately.

The four color channels of this element are as follows.

<feFuncR> element: This element is used to transfer function for the red component of the input graphic of its parent <feComponentTransfer> element.
<feFuncG> element: This element is used to transfer function for the green component of the input graphic of its parent <feComponentTransfer> element.
<feFuncB> element: This element is used to transfer function for the blue component of the input graphic of its parent <feComponentTransfer> element.
<feFuncA> element: This element is used to transfer function for the alpha component of the input graphic of its parent <feComponentTransfer> element.

Note: Remember when you perform color manipulations the element should only have one child element of each type.

Syntax:

<feFuncR type="type_name" tableValues="value_name"/>

The core attribute used:

id: It is used to assign a unique name to an element
lang: It is used to specify the primary language used in contents and attributes containing text content of particular elements.
tabindex: It is used to allow you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
xml:base: It is used to specify a base IRI other than the base IRI of the document or external entity.
xml:lang: It is used to be the primary language used in contents and attributes containing text content of particular elements.
xml:space: It is used to handle whitespace characters inside elements.

Transfer function attributes:

type: It is a generic attribute and it has different meanings based on the context in which it’s used.
tableValues: It is used to define a list of numbers defining a lookup table of values for a color component transfer function.
slope: It is used to indicate the vertical stroke angle of a font.
intercept: It is used to define the intercept of the linear function of color component transfers when the type attribute is set to linear.
amplitude: It is used to control the amplitude of the gamma function of a component transfer element when its type attribute is gamma.
exponent: It is used to define the exponent of the gamma function.

Example 1: In the below code, we will make use of the SVG <feFuncR> element.

HTML

<!DOCTYPE html> 
<html> 
  
<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> 
                    <feFuncR type="table" 
                        tableValues="0 0 1 0" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" preserveAspectRatio="true"
            xlink:href= 
"https://media.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" /> 
        <image x="310" y="10" width="280" height="350"
            preserveAspectRatio="true" filter="url(#new)"
            xlink:href= 
"https://media.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" /> 
    </svg> 
</body> 
  
</html> 

Output:

Example 2: In the below code, we will make use of the <feFuncR> element.

HTML

<!DOCTYPE html> 
<html> 
  
<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> 
                    <feFuncR type="table" 
                        tableValues="1 0 0 0" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" height="350"
            preserveAspectRatio="true"
            xlink:href= 
"https://media.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" /> 
        <image x="310" y="10" width="280" height="350" 
            preserveAspectRatio="true" filter="url(#new)"
            xlink:href= 
"https://media.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" /> 
    </svg> 
</body> 
  
</html> 

Output:

Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncR

HTML

HTML

Contact Us