Static capture of the SVG filter effect
This example shows how SVG filter primitives can be applied to produce a sophisticated rendering effect. In this image, a filter effect is applied to <text> elements. One with the "SVG" text and several with the "W", "O", "W", "!" characters. The characters are grouped into a <g> element which has a 'glow' filter. The "SVG" text has a 'chiseled' filter applied to it.
The 'glow' filter
This is a simple filter and it does the following:
- Turn the input (i.e., the "WOW!" text) into white, using the <feFlood> and <feComposite> filters. feFlood creates a white surface which is composited with the text's alpha (i.e., a chanel providing the translucency information about the text's rendering) using the 'in' operator.
- The white rendering of the text input is blurred using the <feGaussianBlur> filter
- The blured white is combined with the original text rendering using the <feMerge> filter
The 'cliseled' filter
This filter is more elaborate and contains 22 filter primitives to achieve the chiseled gold effect.
There a multiple parts to the filter. The background texture is created using an image texture, loaded with an <feImage>. The texture is then used as a bump map (created with an <feColorMatrix> which allows us to convert the texture's luminance to an alpha channel, required as an input for the lighting filter's bump map) to give it more texture with an <feDiffuseLighting> filter.
The golden text is done very much similarly, except that the bump map is created by blurring the text's alpha channel and the color compolents are adjusted with <feComponentTransfer>.
There is also a drop shadow effect done with a combination of <feGaussianBlur>, <feMorphology>, <feOffset> and <feComposite>.
Multiple instances of the feMerge> and <feComposite> filters are used to overlay or mask different intermediate filter primitive results.