<feDistantLight> is a parallel light source — think of the sun.

All its light rays are parallel, so every pixel on the surface gets hit at the same angle, and the light has no "position" at all, only a direction. Because of this, moving the lit object around the canvas doesn't change the shading at all — only rotating the light does.

The direction is defined by two angles: azimuth (horizontal rotation around the surface, where 0° points along the +X axis / "east", 90° points along the +Y axis / "south") and elevation (vertical angle above the XY plane, where 0° is a grazing ray parallel to the surface and 90° is a ray coming straight down). <feDistantLight> must appear as a child of "<feDiffuseLighting>" or "<feSpecularLighting>" — on its own it does nothing. It takes no standard filter primitive attributes (in, result, x, y, width, height); only azimuth and elevation.

DOM object: SVGFEDistantLightElement
SVG2 spec: https://www.w3.org/TR/filter-effects/#feDistantLightElement

Azimuth and elevation

This explainer diagram shows the two angles. Azimuth sweeps around the compass in the XY plane; elevation tilts the light up from the surface toward the viewer.

Rendered examples

All examples below light the same blurred-alpha "sphere" bump using "<feDiffuseLighting>" and only vary the azimuth / elevation of the distant light. Compare how the bright spot moves across the bump as the angles change.

<filter id="MyFilter">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
  <feDiffuseLighting in="blur" surfaceScale="6" diffuseConstant="1.4" lighting-color="white">
    <feDistantLight azimuth="0" elevation="45" />
  </feDiffuseLighting>
</filter>

At elevation=15 the light grazes across the bump and picks out a thin crescent; at elevation=80 the light comes almost straight down and the whole bump lights up roughly uniformly. Swinging azimuth from 0° to 180° walks the bright spot across the bump from left to right.

Usage

<feDistantLight> can be used as the child of either "<feDiffuseLighting>" (matte shading) or "<feSpecularLighting>" (glossy highlights). See those pages for the full lighting pipelines. For positional lights, see "<fePointLight>" and "<feSpotLight>".

Attributes

Attribute	Default	Description
azimuth	0	Direction angle in degrees, measured clockwise in the XY plane from the +X axis (0 = east, 90 = south).
elevation	0	Angle in degrees above the XY plane (0 = grazing the surface, 90 = straight down).

<feDistantLight> does not take the standard filter primitive attributes (in, result, x, y, width, height) — it is purely a child element of a lighting primitive.