Filters in SVG are usually created inside the ‘<defs>’ element and given an ID for referencing later, this can be as an attribute on an SVG element or defined in CSS.
Filters in SVG are powerful and can be used to produce some truly stunning effects! In order to use a filter in SVG we use the ‘<filter>’ element. Inside of this element we have a number of tools available to us; Blend, Colour Matrix, Component Transfer, Composite, Convolve Matrix, Diffuse Lighting, Displacement Map, Flood, Gaussian Blur, Image, Merge, Morphology, Offset, Specular Lighting, Tile and Turbulence. These are called filter primitives. An SVG filter is made up using a number of these filter primitives.
A filter primitive has one or two inputs and one output. For the input we have…
