DE L'USAGE DES FILTRES SVG

Pour les outils proposés, vous pouvez choisir le ou les fichiers sources de vos images ( JPEG, SVG, PNG ) sur votre disque, modifier TOUS les paramètres des filtres et enregistrer le SVG obtenu ( utilisation de PHP )

1°) Idées générales sur les filtres

a) déclarer les filtres

b) appliquer les filtres

2°) Filtres modifiant les couleurs d'une image:

a) feColorMatrix:
Outil: les termes de la matrice sont affichés pour chaque type, vous pouvez modifer chaque terme de la matrice.
Exemples: Quelques exemples sur une image JPEG

b) feComponentTransfer:
Outil: vous pouvez choisir type et paramètres pour chaque composante Rouge Verte Bleue ou Alpha
Exemples: résulats obtenus sur une image SVG.
              animation fondu enchaîné entre deux images JPEG
              animation sur une image ( éruption volcanique ile de la Réunion janvier 2002 )

3°) Eclairer une image:

a) feSpecularLighting avec comme source lumineuse feSpotLight, feDistantLight ou fePointLight:
Outils: vous pouvez modifier les paramètres de feSpecularLighting et feComposite ( pour composer image et éclairage ) et avec la souris déplacer la lumière sur une image JPEG ou SVG picture (avec  feSpotLight ).
Source lumineuse: feSpotLight, feDistantLight ou fePointLight
Exemple:éclairage d'un cube en 3D avec 3 filtres un pour chaque face en utilisant pattern pour remplir les faces
            animation coucher de soleil sur eau et montagnes ( avec fePointLight )
Utiliser feGaussianBlur, feOffset, feSpecularLighting et feComposite pour créer un effet 3D avec éclairage

b) feDiffuseLighting avec feSpotLight, feDistantLight ou fePointLight:
Outil: vous pouvez modifier les paramètres pour feDiffuseLighting, feSpotLight et feComposite et déplacer avec la souris la lumière sur une image JPEG ou SVG.

4°) Créer une image:

a) feImage:
Depuis une source externe vous obtenez un  "RGBA raster" comme produit de la primitive.
Exemple: filtre utilisé dans de nombreux exemples, comme lighting ou composing.

b) feTurbulence:
Outils:  vous pouvez changer type et paramètres et voir la texture obtenue
           avec feComponentTransfer pour changer les couleurs de la texture
           avec feColorMatrix pour changer les couleurs de la texture
Exemples: quelques exemples en faisant varier les paramètres
             quelques exemples de textures avec feComponentTransfer
             quelques exemples de textures avec feColorMatrix
             quelques animations de textures
             utilisation de feTurbulence et fecomposite pour modifier une image

c) feFlood:
Remplis un rectangle avec flood-color et flood-opacity et renvoie un "RGBA raster".
Exemple: changer les paramètres pour composer une image et un rectangle coloré

d) feTile:
Remplis un rectangle avec une mosaïque
Outil: vous pouvez choisir les dimensions, la source de votre élément.

5°) Mixer des images:

a) feMerge:
Outil: Les seuls paramètres sont les opacités des images à mixer

b) feBlend:
Outil: vous pouvez choisir le mode pour le mixage

c) feComposite:
Outils: changer les paramètres pour mixer deux images
         changer les paramètres pour mixer une image et un rectangle coloré ( feFlood )
         changer les paramètres pour mixer une image et une texture ( feTurbulence )
Utiliser feGaussianBlur, feOffset, feSpecularLighting et feComposite pour créer un effet 3D avec lumière

6°) Modifier une image:

a) feGaussianBlur:
Outil: vous pouvez modifier x et y pour stdDeviation et voir le résultat sur une image JPEG ou SVG
Utiliser feGaussianBlur, feOffset, feSpecularLighting et feComposite pour créer un effet 3D avec lumière

b) feMorphology:
Outil: vous pouvez modifier operator, x_radius, y_radius et voir le résultat sur une image JPEG ou SVG de votre choix.
Exemple: animation mise au point sur une image 
             animations avec gradient radial exemple 1  exemple 2

c) feConvolveMatrix:
Outil: vous pouvez modifier x_order, y_order, kernelMatrix et voir le résultat sur une image JPEG ou SVG de votre choix.

d) feDisplacementMap:
Outil: vous pouvez modifier les paramètres et voir le résultat sur une image JPEG ou SVG de votre choix.
Exemples: Effet sur une image JPEG avec 6 grilles différentes
animations sur une image JPEG avec comme grille petits cercles - cercles concentriques - bandes horizontales - damier - gradient radial

e) feOffset:
Vous déplacez l'image de dx et dy voir un exemple  animation mise au point sur une image
Utiliser feGaussianBlur, feOffset, feSpecularLighting et feComposite pour créer un effet 3D avec lumière