SVG Open / Carto.net  Developers Conference

Zurich, Switzerland - July 15-17, 2002

Subject: Using SVG Filters

by
HIRTZLER Michel
Pilat Informatique Educative
Au Bourg
42520 SAINT-APPOLINARD
FRANCE
Phone/Fax (33) 04 74 87 33 47
Email pilat@wanadoo.fr
Site http://pilat.free.fr

I will show small tools and examples about some SVG filters.

With tools using SVG and javascript, user can modify all parameters for filters and see result.

1) 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.
Example: effect is show on JPEG or SVG picture

b) feComponentTransfer:
Tool: you can modify each filter primitive for each type.
Example: effect is show on JPEG or SVG picture.
               using animate to create to fade-in out between two JPEG pictures

2) Lightning a picture:

feSpecularLightning using feSpotLight:
Tool: you can change parameters for feSpecularLightning, feSpotLight and feComposite ( to merge picture and lightning )
Example: move with mouse lightning on a JPEG picture.
               lightning on a cube in 3D with 3 filters one for each face creating pattern to fill faces.

3) Create texture:

feTurbulence:
Tool: you can change parameters and type to see texture
Example: animation modify texture

All that is ready and online

4) Projects that I will add if I have time before may:

a) feDiffuseLightning to compare with feSpecularLightning
b) feConvolveMatrix and animate to effect