SVG <feSpecularLighting> Filter

Last Updated:

What is <feSpecularLighting> Filter?

The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. The output image is an RGBA image based on the light color.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <body> <svg height="140" width="140" xmlns="http://www.w3.org/2000/svg"> <filter id = "point"> <feSpecularLighting result="specOut" specularExponent="60" lighting-color="#339933"> <fePointLight x="10" y="35" z="150"/> </feSpecularLighting> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="70" cy="70" r="60" style="filter:url(#point)"/> </svg> </body> </html>

Attributes Value

AttributeExplanation
in Specifies the input for the given filter primitive.
surfaceScale Specifies the height of the surface for a light filter primitive.
specularConstant Specifies the ks value in the Phong lighting model.
specularExponent Controls the focus for the light source.
kernelUnitLength Specifies the intended distance in current filter units.

Share this Page

Meet the Author