SVG <feSpecularLighting> Element (original) (raw)

Last Updated : 31 Mar, 2022

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

Syntax:

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 , it indicates the intended distance between successive columns and rows in the kernel matrix.

Example 1:

HTML `

        <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>

`

Output:

Example 2:

HTML `

    <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>

`

Output:

Example 3:

HTML `

    <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>

`

Output: