Filter Effect - Filter Primitives

SVG Filters is used to add special effects to shapes and text.

Filter usually takes an image as input, transforms it and gives an image as output.

A filter is a combination of filter primitives; each primitive can have one or more inputs and an output. The inputs to a primitive are either the source image (ie. produced by previous SVG operations) or the output of another primitive; the output of the last primitive is displayed on the screen.

The available filter primitives are:

The "fe" prefix is employed in all filters and is shorthand for filter effect.

Filter primitives can be joined together to make a complex filter effect.

Filter effects are defined by a <filter> element with an associated ID. Filter effects are applied to elements that have a filter property that reference a <filter> element. Filters must be defined within a <defs> tag.
Here is the syntax:

<defs> <filter id="MyFilter">     <!-- Definition of filter goes here --> </filter> </defs> <text style="filter:url(#MyFilter)">Text with a filter effect</text>

Filtering in SVG occurs between two steps: the user can define filters which will operate on the output of the image generation on the canvas and it is the output of this filter which will, eventually, appear on the screen itself.

Since the rendering of vector graphics is done on the client-side, that means even very complex visual images or filter effects can be described through relatively small files, rather than transmitting large pixel images. Also, all these effects can scale perfectly.