SVG Lighting: feDistantLight and fePointLight Guide

SVG filters enable realistic 3D depth and texture on two-dimensional vector graphics by utilizing light source elements. This article explains how <feDistantLight> and <fePointLight> function within parent lighting filters, detailing their core attributes, spatial behaviors, and implementation methods so you can accurately control light positioning, angles, and surface illumination in your SVG designs.

The Foundation of SVG Lighting

Light source elements do not function independently. They must be placed as child elements inside one of two primary lighting filter primitives:

<feDiffuseLighting>: Simulates matte, non-shiny surfaces that scatter light evenly in all directions.
<feSpecularLighting>: Simulates glossy, reflective surfaces that produce sharp, bright highlights.

The parent filter defines the surface properties (such as surfaceScale, diffuseConstant, specularConstant, and lighting-color), while the nested light source dictates the origin, direction, and shape of the light beam.

Configuring feDistantLight

The <feDistantLight> element defines a light source placed at an infinite distance, functioning identically to natural sunlight. Because the source is infinitely far away, all light rays striking the SVG surface travel in parallel lines, casting consistent light across the entire graphic regardless of position coordinates.

It relies on two angular attributes to define the direction of the light rays:

azimuth: The angle in the horizontal plane (X/Y plane), measured in degrees clockwise from the positive X-axis (the 3 o’clock position). The value ranges from 0 to 360. For example, azimuth="90" positions the light source directly below the object, shining upward, while azimuth="270" positions it directly above.
elevation: The angle above the surface plane (towards the positive Z-axis), measured in degrees. A value of 0 places the light parallel to the surface (grazing light creating long shadows), while 90 positions the light directly perpendicular to the screen (pointing straight down onto the graphic).

Example Syntax

<filter id="distantLightFilter">
  <feDiffuseLighting lighting-color="#ffffff" surfaceScale="2">
    <feDistantLight azimuth="45" elevation="60" />
  </feDiffuseLighting>
</filter>

Configuring fePointLight

The <fePointLight> element simulates a localized omnidirectional light source, similar to an incandescent bulb or an LED positioned near the surface. Unlike distant light, point light radiates outward in all directions from a specific three-dimensional coordinate, resulting in radial gradients and intensity falloff based on distance from the center point.

It is configured using three coordinate attributes:

x: The horizontal position of the light source along the X-axis within the current coordinate system.
y: The vertical position of the light source along the Y-axis.
z: The height of the light source above the SVG canvas along the Z-axis (pointing outward toward the viewer). Higher values spread the light over a broader area with softer highlights, while lower values confine the light to a tight, intense focal point.

Example Syntax

<filter id="pointLightFilter">
  <feSpecularLighting specularConstant="1.5" specularExponent="20" lighting-color="#ffffff">
    <fePointLight x="150" y="100" z="50" />
  </feSpecularLighting>
</filter>

Key Differences and When to Use Each

Use <feDistantLight> when rendering outdoor environments, uniform bevels, embossed UI components, or consistent directional shadows across multiple grouped elements.
Use <fePointLight> when creating interactive focal points (such as a cursor-following light), localized glows, lamps, or dynamic 3D depth maps where perspective and distance-based light attenuation are required.