Skip to content
Related Articles

Related Articles

SVG <feFuncR> Element

Improve Article
Save Article
  • Last Updated : 25 Aug, 2022
Improve Article
Save Article

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=
        <image x="310" y="10" width="280" height="350"
            preserveAspectRatio="true" filter="url(#new)"
            xlink:href=
    </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=
        <image x="310" y="10" width="280" height="350" 
            preserveAspectRatio="true" filter="url(#new)"
            xlink:href=
    </svg>
</body>
  
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!