USING SVG FILTERS

1°) General ideas about filters

a) declaration of filters

b) apply filters

2°) Filters to modify colors of a picture:

a) feColorMatrix:
Tool: value of matrix is show for any type, you can also change each term of matrix.
Examples: Effect is show on JPEG picture
Using luminanceToAlpha and lighting on bitmap : some examples

b) feComponentTransfer:
Tool: you can modify each filter primitive for each type.
Examples: effect is show on SVG picture.
              using animate to create to fade-in out between two JPEG pictures
              using animate on a picture ( volcano eruption on Reunion island january 2002 )

3°) Lighting a picture:

a) feSpecularLighting using feSpotLight, feDistantLight or fePointLight:
Tools: You can change parameters for feSpecularLighting and feComposite ( to merge picture and lighting ) and move with mouse lighting on a JPEG or SVG picture for feSpotLight.
Lighting sources: feSpotLight, feDistantLight or fePointLight
Example:lighting on a cube in 3D with 3 filters one for each face creating pattern to fill faces.
            animation sunset on water and mountains ( using fePointLight )
Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

b) feDiffuseLighting using feSpotLight, feDistantLight or fePointLight:
Tool: you can change parameters for feDiffuseLighting, feSpotLight and feComposite ( to merge picture and lightning ) and move with mouse lighting on a JPEG or SVG picture.
feDiffuseLighting to create 3D effects on patterns, on tilings and on feTurbulence 
Animation of surfaceScale on feTurbulence

4°) Create picture:

a) feImage:
From a graphic external, you get an RGBA raster as result of the filter primitive.
Example: filter used in most of examples here, as lighting or composing.

b) feTurbulence:
Tools: you can change parameters and type to see texture 
         add feComponentTransfer filter to change colors of texture
add feColorMatrix filter to change colors of texture
Examples: some examples with different values for parameters
            some examples with feComponentTransfer
            some examples with feColorMatrix
             some animations about texture
             using feTurbulence and fecomposite

c) feFlood:
Fill a rectangle with flood-color and flood-opacity.
Example: change parameters to compose picture with rectangle colored

d) feTile:
Tiling a rectangle with a picture
Tool: you can choose width and height for tile and tiling

5°) Merge pictures:

a) feMerge:
Tool: you can change opacity of each picture

b) feBlend:
Tool: you can change mode for operation

c) feComposite:
Tools: change parameters to compose two pictures
         change parameters to compose picture with rectangle colored ( feFlood )
         change parameters to compose picture with feTurbulence filter filled rectangle
Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

6°) Modify picture:

a) feGaussianBlur:
Tool: you can modify x and y for stdDeviation and see effect on JPEG or SVG picture
Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

b) feMorphology:
Tool: you can modify operator, x_radius, y_radius and see effect on JPEG or SVG picture
Example: animation focussing on a picture
             animations with radial gradient example 1  example 2

c) feConvolveMatrix:
Tool: you can modify x_order, y_order, kernelMatrix an see effect on picture of your choice.
Example:

d) feDisplacementMap:
Tool: Change parameters, pictures see effects and save SVG
Examples: See effect on a JPEG picture with different grids
animations on JPEG picture with grid small circles - concentric circles - horizontal strips - checked grid - radial gradient

e) feOffset:
You offset the input image by dx and dy See an example  animation focussing on a picture
Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting

Load all tools in zip file ( 300 ko )