Examples of Common SVG Filter Primitives

Below is an example of a lighting effect. There are two light filter primitives to choose from: feDiffuseLighting and feSpecularLighting. There are also three light sources available: feDistantLight, fePointLight, and feSpotlight.

<filter id="lighting_filter">

<feDiffuseLighting>

<feSpotLight x="0" y="0" z="50" pointsAtX="300" pointsAtY="300" pointsAtZ="0" limitingConeAngle="20" specularExponent="5"/>

feDiffuseLighting>

filter>

<g id="myPig" filter="url(#lighting_filter)">

g>

   
An image of an SVG pig before (left) applying an lighting filter and after (right) applying the lighting filter

As you can see, the lighting filter alone produces a greyscale image of a light map. A spotlight filter is located in the upper left hand corner at coordinate (0, 0, 50) and is shining towards the lower right hand corner, creating the grey shape on the black rectangle. The light filter becomes much more useful when it is used in conjunction with another filter:

<filter id="lighting_filter">

<feDiffuseLighting result="result1">

<feSpotLight x="0" y="0" z="50" pointsAtX="300" pointsAtY="300" pointsAtZ="0" limitingConeAngle="20" specularExponent="5"/>

feDiffuseLighting>

<feComposite operator="arithmetic" k1="1" k2="0" k3="0" k4="0" in="SourceGraphic" in2="result1"/>

filter>

An feComposite filter primitive is tacked onto the end of the filter chain. You’ll notice that it takes two inputs: SourceGraphic, the original image of the pig to which the filter is applied, and the result of the lighting filter. The feComposite filter primitive performs a compositing operation on the two inputs. It’s very useful for compositing multiple filter primitive outputs together, such as creating a more complex light map from multiple light sources. In this case, the result of the lighting filter is multiplied with the pig graphic, resulting in the below graphic: a spotlight on a pig.

   
An image of an SVG pig after applying the lighting filter and multiplying it with the original image. Left: transparent background. Right: filter is applied to the SVG pig and a white behind it.

With the feComposite filter, an ‘over’ compositing operation is easy to achieve. That is, it is easy to the composite the results of several filter primitives on top of each other to form a single image. The element is a key filter primitive, as it achieves this exact behavior – compositing the results of several filter primitives on top of each other. simplifies this process with child elements, enabling more than just two filter primitive results to be composited with the ‘over’ operation at a single time.
Another important filter primitive to point out is the feImage filter primitive, as it makes it possible to bring additional images into the filter. It can be used to reference an external image or other svg elements. The image can then be used as an input to another filter primitive.

An image of an SVG pig after applying a filter that multiplies the image with a photo of the sky

These were just a few examples of SVG filter primitives. A complete list of filter primitives can be found in the SVG Filter Effects specification.