Michel Hirtzler
Pilat Informatique Educative
Au Bourg
42520 SAINT-APPOLINARD
FRANCE
e-mail: mailto:pilat@wanadoo.fr
fax: ++33-0474873347
webpage:http://pilat.free.fr/
Keywords: SVG filters, SVG components, SVG animations, SVG tools
Abstract
This work will show tools, examples and animations using SVG filters.
In SVG filters, there are many different parameters and it's not always easy
to understand function of each.
Drawing tools using SVG allow only some combination of filters and some variations.
To illustrate W3C specifications, I create tools to show effect of each parameter.
Using this tools, I collect various examples, and some give interesting animations.
With this tools using SVG, ECMA/Javascript and PHP user can:
- choose one or two pictures on local disk ( PNG, JPEG or SVG file ) for filters using in and in2 attributes
- modify all parameters for filters and see effect obtained
- save as SVG file the drawing ( using PHP to return file )
This tools treat all SVG filters primitives, alone or in combination
Using filter primitive alone: feColorMatrix, feComponentTransfer, feTurbulence, feMerge, feBlend, feComposite, feGaussianBlur, feMorphology, feConvolveMatrix, feDisplacementMap, feTile.
Filter primitives feSpecularLighting and feDiffuseLighting ( with feSpotLight, feDistantLight or fePointLight as lighting source ) are used with feComposite to create lighted drawing.
Filter primitives feImage, feFlood and feOffset are used to create input for other filters.
Some combination are predefined:
feTurbulence with feColorMatrix or feComponentTransfer to create patterns as clouds.
feTurbulence with feComposite to create grain on picture.
feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D ligth effect
All tools and examples are online and can be load in zip archive for local use.
Figure 1: Presentation of tools
A tool allow you to choose any primitive filter, modify parameters, see result of each primitive and get SVG code with PHP server.
Figure 2: Tool for any combination of primitives
For each filter primitive or combination, you can see examples as SVG files.
Here you can see effect of feDisplacementMap primitive on a JPEG picture, with some grids.
Figure 3: feDisplacementMap examples
For some primitives, you can see animations.
For this examples of feDisplacementMap, there is animation using scale. Animation put scale to 0 and you get interesting effect that you can use on loading pictures.
Try these:
Figure 4: Focussing on a picture |
Figure 5: Delaying a picture using radialgradient as grid |
Summary
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
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 )
Filter primitives to light a picture:
Filter primitives to create picture:
Filter primitives to merge pictures:
Filter primitives to modify picture:
[1] Scalable Vector Graphics (SVG) 1.0 Specification. W3C Recommendation 04 September 2001. Available at http://www.w3.org/TR/SVG/filters.html
[2] Compositing Digital Images", T. Porter, T. Duff, SIGGRAPH '84 Conference Proceedings, Association for Computing Machinery, Volume 18, Number 3, July 1984.