Learning SVG series (4): SVG filter effects

Note: Internet Explorer and Safari do not support SVG filters

<defs>, <filter>

All Internet SVG filters are defined in the <defs> element,<filter> tags are used to define the SVG filter,<filter> label using the required ID attribute to define the apply to the image in the filter

SVG Blur effect

<feGaussianBlur>

The Fegaunssianblur element is used to create a blur effect

SVG code:

<svg xmlns= "Http://www.w3.org/2000/svg" version= "1.1" >
<defs>
<filter id= "F1" x= "0" y= "0" >
<fegaussianblur in= "sourcegraphic" stddeviation= "/>"
</filter>
</defs>
<rect width= "height=" stroke= "Green" stroke-width= "3"
Fill= "yellow" filter= "url (#f1)"/>
</svg>

Code parsing:

<filter> Element ID attribute defines a unique name for a filter

<feCaussianBlur> element definition Blur effect

The in= "sourcegraphic" section defines the effect created by the entire image.

Stddeviation property defines the amount of blur

The filter attribute of the <rect> element is used to link elements to the "F1" filter

SVG shadows

<feOffset>

Feoffset elements for creating shadow effects

Example 1

Offset a rectangle (with <feOffset>) and then blend the top of the image (with <feBlend>)

SVG code:

<svg xmlns= "Http://www.w3.org/2000/svg" version= "1.1" >
<defs>
<filter id= "F1" x= "0" y= "0" width= "200%" height= "200%" >
<feoffsetresult= "Offout" in= "sourcegraphic" dx= "the Dy=" "/>"
<feblendin= "Sourcegraphic" in2= "offout" mode= "normal"/>
</filter>
</defs>
<rect width= "height=" stroke= "Green" stroke-width= "3"
Fill= "yellow" filter= "url (#f1)"/>
</svg>

Example 2

The offset image can be blurred (including <feGaussianBlur>)

SVG code:

<svgxmlns= "Http://www.w3.org/2000/svg" version= "1.1" >
<defs>
<filter id= "F1" x= "0" y= "0" width= "200%" height= "200%" >
<feoffsetresult= "Offout" in= "sourcegraphic" dx= "the Dy=" "/>"
<fegaussianblur result= "Blurout" in= "offout" stddeviation= "/>"
<feblendin= "Sourcegraphic" in2= "blurout" mode= "normal"/>
</filter>
</defs>
<rect width= "height=" stroke= "Green" stroke-width= "3"
Fill= "yellow" filter= "url (#f1)"/>
</svg>

Code parsing

The stddeviation attribute of the element defines the amount of blur

Example 3

Make a black Shadow

SVG code:

<svgxmlns= "Http://www.w3.org/2000/svg" version= "1.1" >
<defs>
<filter id= "F1" x= "0" y= "0" width= "200%" height= "200%" >
<feoffsetresult= "Offout" in= "Sourcealpha" dx= "the Dy=" "/>"
<fegaussianblur result= "Blurout" in= "offout" stddeviation= "/>"
<feblendin= "Sourcegraphic" in2= "blurout" mode= "normal"/>
</filter>
</defs>
<rect width= "height=" stroke= "Green" stroke-width= "3"
Fill= "yellow" filter= "url (#f1)"/>
</svg>

Code parsing:

The attribute of the Feoffset element is changed to "Sourcealpha" in the alpha channel using the ghost instead of the entire RGBA pixel

Example 4

Apply a layer of color to the shadow

SVG code:

<svgxmlns= "Http://www.w3.org/2000/svg" version= "1.1" >
<defs>
<filter id= "F1" x= "0" y= "0" width= "200%" height= "200%" >
<feoffsetresult= "Offout" in= "sourcegraphic" dx= "the Dy=" "/>"
<fecolormatrixresult= "Matrixout" in= "Offout" type= "Matrix"
values= "0.20 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<fegaussianblur result= "Blurout" in= "matrixout" stddeviation= "/>"
<feblendin= "Sourcegraphic" in2= "blurout" mode= "normal"/>
</filter>
</defs>
<rect width= "height=" stroke= "Green" stroke-width= "3"
Fill= "yellow" filter= "url (#f1)"/>
</svg>

Learning SVG series (4): SVG filter effects