Skip to content
Related Articles

Related Articles

Improve Article

SVG <feSpecularLighting> Element

  • Last Updated : 18 Nov, 2020

The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map.

Syntax:

<feSpecularLighting in ="" surfaceScale =""  specularConstant="" 
specularExponent="" kernelUnitLength="" >

Attributes: 

  • in: It identifies input for the given filter primitive.
  • surfaceScale: It represents the height of the surface for a light filter primitive.
  • specularConstant: It controls the ratio of reflection of the specular lighting.
  • specularExponent: It controls the focus for the light source.
  • kernelUnitLength: It has two meanings based on the context it’s used in. For lighting filter primitives, it indicates the intended distance for the x and y coordinates, for <feConvolveMatrix>, it indicates the intended distance between successive columns and rows in the kernel matrix.

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200">
        <filter id="filter">
  
            <feSpecularLighting specularExponent="5"
                lighting-color="gold" result="light">
                  
                <fePointLight x="100" y="100" z="100" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" 
                in2="specOut" operator="arithmetic" 
                k1="1" k2="0" k3="1" k4="0" />
        </filter>
  
        <rect x="1" y="1" width="200" height="200" 
            style="stroke: #000000; fill: green; 
            filter: url(#filter);" />
  
        <rect x="50" y="50" width="100" height="100" 
            style="stroke: #000000; fill: green; 
            filter: url(#filter);" />
  
        <g fill="#FFFFFF" stroke="black" font-size="10" 
            font-family="Verdana">
              
            <text x="60" y="100">GeeksForGeeks</text>
    </svg>
</body>
  
</html>

Output:



Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200" 
        viewBox="0 0 220 220">
          
        <filter id="filter">
  
            <feSpecularLighting specularExponent="2"
                lighting-color="shadow" result="light">
                  
                <fePointLight x="200" y="200" z="100" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" 
                in2="specOut" operator="arithmetic" 
                k1="0" k2="1" k3="1" k4="0" />
        </filter>
  
        <rect x="40" y="40" width="200" height="200" 
            style="stroke: black; fill: green;
            filter: url(#filter);" />
  
        <circle cx="130" cy="130" r="50" style=
            "fill: black; filter:url(#filter)" />
    </svg>
</body>
  
</html>

Output:

Example 3:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200" 
        viewBox="0 0 220 220">
          
        <filter id="filter">
  
            <feSpecularLighting in="BackgroundImage"
                specularConstant="0.8" surfaceScale="1"
                specularExponent="20" kernelUnitLength="1"
                lighting-color="red">
                  
                <fePointLight x="100" y="100" z="220" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" in2="specOut"
                operator="arithmetic" k1="0" k2="1" 
                k3="1" k4="0" />
        </filter>
  
        <rect x="40" y="40" width="100" height="100" 
            style="stroke: #000000; fill: lightgreen; 
                filter: url(#filter);" />
    </svg>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :