Guide to SVG feDiffuseLighting Matte 3D Effects

The feDiffuseLighting filter primitive in SVG is used to create realistic, non-reflective three-dimensional lighting effects on two-dimensional graphics. By interpreting the alpha channel of an input graphic as a heightmap and applying the Lambertian reflection model, this filter calculates how light scatters across an uneven surface. This article explains the underlying mechanics of feDiffuseLighting, its key configuration attributes, and how it is combined with specific light sources to simulate tactile, matte surfaces.

Understanding Lambertian Reflection in SVG

Unlike glossy materials that reflect light in a single direction (specular reflection), matte surfaces scatter light uniformly in all directions. The feDiffuseLighting filter simulates this behavior using Lambert’s Cosine Law, where the apparent brightness of a surface depends on the angle between the incoming light ray and the surface normal.

The filter uses the alpha channel of the input image (in="SourceAlpha" or another filter primitive) as an elevation map (bump map). Higher alpha values represent higher elevations, while lower alpha values represent depressions. The filter calculates surface normals across these elevations and computes the resulting matte illumination, producing smooth gradients that give flat vector paths perceived depth and volume without creating sharp specular highlights.

Key Attributes of <feDiffuseLighting>

To control the strength, depth, and appearance of the lighting effect, <feDiffuseLighting> utilizes several core attributes:

• surfaceScale: Defines the height of the surface elevation map. Higher values exaggerate the differences in elevation, making the 3D relief appear deeper and sharper, while lower values produce subtle, softer contours.
• diffuseConstant: Represents the reflection constant (\(k_d\)) in the Lambertian model. This value must be non-negative. Higher values increase the overall brightness and intensity of the scattered light.
• lighting-color: Defines the color of the light source. It accepts standard CSS color values (e.g., #ffffff, rgb(), named colors).

Light Source Child Elements

The feDiffuseLighting element cannot generate light independently; it requires one of three SVG light source elements placed as a direct child:

1. <feDistantLight>: Simulates an infinite light source located far away (such as the sun). It is defined using directional angles via the azimuth (horizontal rotation) and elevation (height angle above the surface) attributes.
2. <fePointLight>: Simulates a localized light source radiating in all directions from a specific 3D coordinate defined by x, y, and z attributes.
3. <feSpotLight>: Simulates a focused cone of light originating from (x, y, z) and pointing toward a target location (pointsAtX, pointsAtY, pointsAtZ), with controls for cone angle (limitingConeAngle) and beam focus (specularExponent).

Standard Implementation Workflow

Because feDiffuseLighting outputs an image containing only the calculated lighting information (grayscale or tinted by lighting-color), it is typically integrated into a multi-step filter graph:

1. Input Extraction: The filter targets the graphic’s alpha channel to generate the bump map.
2. Light Calculation: feDiffuseLighting applies the chosen light element and surface parameters to compute the diffuse map.
3. Compositing: The resulting light map is combined back with the original graphic using the <feComposite> primitive (typically using the in operator or arithmetic mode) or <feBlend> (using multiply or overlay modes) to apply the 3D matte shading directly to the colored artwork.