All SVG filters are defined within a <defs> element. The <defs> element is short for definitions and contains definition of special elements (such as filters). The <filter> element is used to define an SVG filter. The <filter> element has a required id attribute which identifies the filter. The graphic then points to the filter to use.
The SVG feGaussianBlur element is used to perform a Gaussian blur on the image.
The stdDeviation attribute defines the standard deviation for the blur operation.
The SVG feOffset element is used to move an image relative to its current position. With this element it is possible to create drop shadow effects.
The dx attribute specifies the amount to move the image along the x-axis.
The dy attribute specifies the amount to move the image along the y-axis.
The SVG feBlend element is used to composite two objects together using different blending modes.
The mode attribute defines the image blending mode. The mode attribute can take one of the following values:
The in2 attribute defines the second input image to the blending operation. This attribute can take on the same values as the in attribute.
The <linearGradient> element is used to define a linear gradient.
The <linearGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).
Linear gradients can be defined as horizontal, vertical or angular gradients:
Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ
Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ
Angular gradients are created when x1 and x2 differ and y1 and y2 differ
The <radialGradient> element is used to define a radial gradient.
The <radialGradient> element must be nested within a <defs> tag. The <defs> tag is short for definitions and contains definition of special elements (such as gradients).