<feSpotLight> is a directional, cone-shaped light — think of a flashlight or a theatre spotlight.

It sits at a position (x, y, z) in filter coordinates, points at a target (pointsAtX, pointsAtY, pointsAtZ), and only illuminates surfaces that fall inside a cone around that pointing direction. Pixels outside the cone are unlit.

Two attributes control the shape of the cone. limitingConeAngle is the half-angle of the cone in degrees — light outside this angle is clipped to black, giving you a hard edge. specularExponent (used for both diffuse and specular spotlights, despite its name) controls how quickly the light fades from the bright centre of the cone to its edge: small values (1–5) give a smooth, soft-edged pool of light, and large values (50+) concentrate the light into a tight hotspot. <feSpotLight> must appear as a child of "<feDiffuseLighting>" or "<feSpecularLighting>" — on its own it does nothing. It takes no standard filter primitive attributes.

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

Cone geometry

The spotlight sits at (x, y, z) and its axis runs through (pointsAtX, pointsAtY, pointsAtZ). limitingConeAngle is measured from that axis outward.

Rendered examples

All examples below light the same blurred-alpha "sphere" bump (a 100 × 100 region with the bump centred at (50, 50)) using "<feDiffuseLighting>". Only the spotlight parameters change.

<filter id="MyFilter">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
  <feDiffuseLighting in="blur" surfaceScale="6" diffuseConstant="1.4" lighting-color="white">
    <feSpotLight x="10" y="10" z="60"
                 pointsAtX="50" pointsAtY="50" pointsAtZ="0"
                 specularExponent="5" limitingConeAngle="40" />
  </feDiffuseLighting>
</filter>

The first three examples keep the same light position and target but sweep limitingConeAngle from 15° (a tight pencil beam that only grazes a small spot) to 60° (a wide pool that covers most of the bump). The fourth keeps the 40° cone but cranks specularExponent from 5 to 60, concentrating the light into a small bright core even though the cone is still wide. The last example keeps the cone narrow but re-aims the spotlight at (80, 80, 0) — the hotspot moves to the lower-right.

Usage

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

Attributes

Attribute	Default	Description
x	0	X coordinate of the light in the filter's coordinate system.
y	0	Y coordinate of the light.
z	0	Z coordinate (height above the surface).
pointsAtX	0	X coordinate of the point the light is aimed at.
pointsAtY	0	Y coordinate of the aim point.
pointsAtZ	0	Z coordinate of the aim point.
specularExponent	1	Falloff exponent from the centre of the cone to its edge. Larger values give a tighter, sharper hotspot.
limitingConeAngle	none	Half-angle of the cone in degrees. Light outside the cone is clipped to black. If omitted, the cone is unbounded.

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