SVG filters

Usability issues

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.

Introduction

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.

Tools

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

Examples of effects

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.

feDisplacementMap examples


Figure 3: feDisplacementMap examples

Animations using filters

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

 General ideas about filters

  • declaration of filters

  • apply filters

  • tool to combine any primitive

    •

    Filter primitives to modify colors of a picture:

  • 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:

  • 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
  • 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.
    Example: see examples for values of surfaceScale for feDiffuseLighting on feTurbulence effect.
                  examples using gradient, using pattern, using tiling of plane 
    •

     Filter primitives to create picture:

  • 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.
  • 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
  •   feFlood:
    Fill a rectangle with flood-color and flood-opacity.
    Example: change parameters to compose picture with rectangle colored
  •   feTile:
    Tiling a rectangle with a picture
    Tool: you can choose width and height for tile and tiling
    •

    Filter primitives to merge pictures:

  • feMerge:
    Tool: you can change opacity of each picture
  • feBlend:
    Tool: you can change mode for operation
    Examples for different values of mode
  • 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
    Examples for mode values    
     Using feGaussianBlur, feOffset, feSpecularLighting and feComposite to create 3D effect lighting
    •

    Filter primitives to modify picture:

  • 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
  • feMorphology:
    Tool: you can modify operator, x_radius, y_radius and see effect on JPEG or SVG picture
    Example: effects on JPEG and SVG image
                 animation focussing on a picture
                 animations with radial gradient example 1  example 2
  • feConvolveMatrix:
    Tool: you can modify x_order, y_order, kernelMatrix an see effect on picture of your choice.
    Example:
  • feDisplacementMap:
    Tool: Change parameters, pictures see effects and save SVG
    Examples: See effect on a JPEG picture with different grids
    animations on picture with grid 
    small circles     - concentric circles - horizontal strips - checked grid - radial gradient - feTurbulence         
    fade-in out between two pictures with grid : radial gradient - feTurbulence
  • 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

    • References

    [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.

     

    Valid XHTML 1.0!