feSpecularLighting filter

You have to use light source with feSpotLight, feDistantLight or fePointLight.
You have to use feComposite, feMerge or feBlend to merge picture and light.
feComposite give best result with more parameters.


  • surfaceScale : height of surface when Ain = 1.    ( see examples for values of surfaceScale as SVG )
  • specularConstant : ks in Phong lighting model. In SVG, this can be any non-negative number.
  • specularExponent : Exponent for specular term, larger is more "shiny". Range 1.0 to 128.0.
  • lighting-color : color value for light
  • result : name of RGBA raster created
  • Example of code:

       <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
          <feImage xlink:href='puzzle.jpg' result='image'/>
          <feSpecularLighting lighting-color='white' result='spot' specularConstant ='1' specularExponent='16'> 
             <feSpotLight x='200' y='200' z='200' pointsAtX='200' pointsAtY='100' pointsAtZ='0' specularExponent='16' limitingConeAngle='45' />
          <feComposite in='image' in2='spot' operator="arithmetic" k1="0.5" k2="1" k3="1" k4="0"/>
    <use filter="url(#MyFilter)" x='0' y='0'/>

    Figure 1: Cube with different lighting for each slide

    Tools: You can change parameters for feSpecularLighting and feComposite ( to merge picture and lighting ) and move with mouse lighting on a JPEG or SVG picture for feSpotLight.
    Lighting sources: feSpotLight, feDistantLight or fePointLight
    Example:lighting on a cube in 3D with 3 filters one for each face creating pattern to fill faces.
                animation sunset on water and mountains ( using fePointLight )
    Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

    FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset

    Valid XHTML 1.0!