SVG shadow

Note: Internet Explorer and Safari does not support SVG filters!

<Defs> and <filter>

SVG filters all Internet defined in <defs> element. <Defs> element defines short and contains special elements (such as filters) definition.

<Filter> tag is used to define SVG filter. <Filter> tag with the required id attribute to define the graphical application which filters?

SVG <feOffset>

Example 1

<FeOffset> element is used to create a shadow effect. The idea is to take a SVG graphics (or image elements) and move it around a little in the xy plane.

The first example offset a rectangle (with <feOffset>), and then mixed offset top of the image (including <feBlend>):

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• The only name <filter> element id attribute defines a filter
• Filter Properties <rect> element is used to link the elements to "f1" filter

Example 2

Now, you can shift the image becomes blurred (containing <feGaussianBlur>):

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• stdDeviation <feGaussianBlur> element property defines the amount of blurring

Example 3

Now make a black shadow:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• Properties <feOffset> element to "SourceAlpha" use blur in the Alpha channel, rather than the entire RGBA pixels.

Example 4

Shadow is now coated with a color:

Here is the SVG Code:

For Opera users: view SVG file (right-click on the preview source SVG graphics).

Code analysis:

• <FeColorMatrix> Offset filter is used to convert an image to make it closer to the black color. '0.2' to obtain three values ​​are multiplied by a matrix of red, green, and blue color channels. Reducing its value to bring color to black (black is 0)