SVG <feDistantLight> Element

Last Updated : 22 Aug, 2022

SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.

The SVG <feDiffuseLighting> filter primitive lights an image using the alpha channel as a bump map. Using diffuse lighting the sides of the object facing the light are brighter and the sides facing away are darker and in shadow.

The two channels of <feDiffuseLighting> are as follows.

<fePointLight/> element: This element is used to define a light source that allows for the creation of a point light effect.
<feDistantLight/> element: This element is used to defines a distant light source that can be used within a lighting filter primitive namely <feDiffuseLighting> or <feSpecularLighting>.

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.

azimuth attribute: It is used to specify the direction angle for the light source on the XY plane (clockwise), in degrees from the x-axis.

elevation: It is used to specify the direction angle for the light source from the XY plane towards the z-axis, in degrees.

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

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 
        <h3>A computer science portal for geeks</h3> 
    </center> 
    <svg viewBox="0 0 1000 1000"> 
        <filter id="lightMe2"> 
            <feDiffuseLighting in="SourceGraphic"
                  surfaceScale="1" diffuseConstant="2"
                  kernelUnitLength="2"> 
  
                <fePointLight x="90" y="60" z="60" /> 
  
                <feDistantLight azimuth="140" elevation="220" /> 
            </feDiffuseLighting> 
  
            <feComposite in="SourceGraphic" in2="light"
                 operator="arithmetic" k1="1" k2="0"
                 k3="0" k4="0" /> 
        </filter> 
  
        <rect x="20" y="20" width="200" height="200"
              fill="green" style="filter: url(#lightMe2);" /> 
    </svg>       
</body> 
</html> 

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3> 
    </center> 
    <svg viewBox="0 0 1000 1000"> 
        <filter id="lightMe3"> 
            <feDiffuseLighting in="BackgroundImage"
                surfaceScale="4" diffuseConstant="2"
                kernelUnitLength="2"> 
  
                <feSpotLight x="50" y="60" z="70"
                    limitingConeAngle="40"
                    pointsAtX="200" pointsAtY="200"
                    pointsAtZ="0" /> 
  
                <fePointLight x="80" y="80" z="40" /> 
            </feDiffuseLighting> 
  
            <feComposite in="SourceGraphic"
                in2="light" operator="arithmetic"
                k1="14" k2="0" k3="1" k4="0" /> 
        </filter> 
  
        <rect x="20" y="20" width="200" height="200"
              fill="blue" style="filter: url(#lightMe3);" /> 
    </svg> 
</body> 
</html> 