15 Les effets de filtre

Contenu

• 15.1 Introduction
• 15.2 Un exemple
• 15.3 L'élément 'filter'
• 15.4 La propriété 'filter'
• 15.5 La région des effets de filtre
• 15.6 L'accès à l'image d'arrière-plan
• 15.7 Aperçu sur les primitives de filtre
  • 15.7.1 Aperçu
  • 15.7.2 Les attributs communs
  • 15.7.3 La sous-région d'une primitive de filtre
• 15.8 Les éléments et les propriétés de source lumineuse
  • 15.8.1 Introduction
  • 15.8.2 La source lumineuse 'feDistantLight'
  • 15.8.3 La source lumineuse 'fePointLight'
  • 15.8.4 La source lumineuse'feSpotLight'
  • 15.8.5 La propriété 'lighting-color'
• 15.9 La primitive de filtre 'feBlend'
• 15.10 La primitive de filtre 'feColorMatrix'
• 15.11 La primitive de filtre 'feComponentTransfer'
• 15.12 La primitive de filtre 'feComposite'
• 15.13 La primitive de filtre 'feConvolveMatrix'
• 15.14 La primitive de filtre 'feDiffuseLighting'
• 15.15 La primitive de filtre 'feDisplacementMap'
• 15.16 La primitive de filtre 'feFlood'
• 15.17 La primitive de filtre 'feGaussianBlur'
• 15.18 La primitive de filtre 'feImage'
• 15.19 La primitive de filtre 'feMerge'
• 15.20 La primitive de filtre 'feMorphology'
• 15.21 La primitive de filtre 'feOffset'
• 15.22 La primitive de filtre 'feSpecularLighting'
• 15.23 La primitive de filtre 'feTile'
• 15.24 La primitive de filtre 'feTurbulence'
• 15.25 Les interfaces du DOM

15.1 Introduction

Ce chapitre décrit le jeu des fonctions des effets de filtre déclaratifs de SVG, ceux-ci quand ils sont combinés avec les possibilités en 2D de SVG peuvent décrire la plupart des productions graphiques communes sur le Web, de telle façon que leur génération et leur modification côté client puisse être effectuées facilement. De plus, la possibilité d'appliquer des effets de filtre aux éléments graphiques et aux éléments conteneurs de SVG est favorable au maintien d'une structure sémantique du document, au lieu de faire appel à des images qui, non seulement, sont en général dans une résolution fixe, mais aussi qui tendent à obscurcir la sémantique générale des éléments qu'elles remplacent. Ceci est particulièrement vrai pour les effets appliqués au texte.

Un effet de filtre consiste en une succession d'opérations graphiques, appliquées sur un graphique source, dont le produit est un graphique modifié. Le résultat de l'effet de filtre est rendu sur l'appareil cible à la place du graphique source original. Voici une illustration du processus :

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

On définit un effet de filtre avec un élément 'filter'. Pour appliquer un effet de filtre sur un élément graphique ou un élément conteneur, on paramètre la propriété 'filter' de l'élément donné pour qu'ainsi elle appelle l'effet de filtre.

Chaque élément 'filter' contient un jeu de primitives de filtre comme enfants. Chaque primitive de filtre effectue une seule opération graphique fondamentale (par exemple, un flou ou un effet de lumière) sur une ou plusieurs entrées, donnant un résultat graphique. Comme la plupart des primitives de filtre représentent une certaine forme de traitement d'image, la sortie d'une primitive de filtre est généralement une seule image RGBA.

La source graphique originale ou le résultat d'une primitive de filtre peuvent être utilisés comme entrées pour une ou plusieurs autres primitives de filtre. La réutilisation de la source graphique est couramment employée. Par exemple, un simple filtre peut remplacer un graphique par deux, en ajoutant une copie noire du graphique source original, décalée pour créer un effet d'ombrage. En fait, ce sont deux couches de graphique, les deux ayant la même source graphique originale.

Appliquée aux éléments conteneurs, tel que l'élément 'g', la propriété 'filter' concerne le contenu du groupe comme un tout. Les enfants du groupe ne sont pas rendus directement à l'écran ; plutôt, les commandes graphiques nécessaires à leur rendu sont stockées temporairement. Typiquement, les commandes graphiques sont exécutées comme faisant partie du traitement de l'élément 'filter' appelé via les mots-clés SourceGraphic ou SourceAlpha. Les effets de filtre peuvent s'appliquer aux éléments conteneurs qui n'ont pas de contenu (par exemple, un élément 'g' vide), auquel cas les valeurs SourceGraphic ou SourceAlpha consistent en un rectangle noir transparent de la taille de la région de l'effet de filtre.

Les primitives de filtre résultent parfois en des pixels indéfinis. Par exemple, la primitive de filtre 'feOffset' peut déplacer une image vers le bas et vers la droite, laissant des pixels indéfinis en haut à gauche. Dans ces cas, les pixels indéfinis reçoivent une valeur de noir transparent.

15.2 Un exemple

Ce qui suit est un exemple d'effet de filtre.

L'exemple Filtres01 - introduction aux effets de filtre.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple Filtres01 - introduction aux effets de filtre</title>
  <desc>Un exemple combinant plusieurs primitives de filtre
        pour obtenir un effet de lumière en 3D sur un graphique qui consiste
        de la chaîne "SVG" sur un ovale rempli en rouge entouré par
        un contour ovale rouge.</desc>
  <defs>
    <filter id="MonFiltre" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="flou"/>
      <feOffset in="flou" dx="4" dy="4" result="flouDecalage"/>
      <feSpecularLighting in="flou" surfaceScale="5" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="speculaireSortie">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="speculaireSortie" in2="SourceAlpha" operator="in" result="speculaireSortie"/>
      <feComposite in="SourceGraphic" in2="speculaireSortie" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="peintureEclairee"/>
      <feMerge>
        <feMergeNode in="flouDecalage"/>
        <feMergeNode in="peintureEclairee"/>
      </feMerge>
    </filter>
  </defs>
  <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />
  <g filter="url(#MonFiltre)" >
	  <g>
      <path fill="none" stroke="#D90000" stroke-width="10" 
            d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
      <path fill="#D90000" 
            d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
        <text x="52" y="76">SVG</text>
      </g>
    </g>
  </g>
</svg>

Exemple Filtres01

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

L'effet de filtre, utilisé dans l'exemple ci-dessus, est répété ici avec des numéros de référence dans la colonne de gauche devant chacune des six primitives de filtre :

 
 
1
2
3
 
 
 
 
4
5
 
6
 
 
 
 

<filter id="MonFiltre" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
  <desc>Produces a 3D lighting effect.</desc>
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="flou"/>
  <feOffset in="flou" dx="4" dy="4" result="flouDecalage"/>
  <feSpecularLighting in="flou" surfaceScale="5" specularConstant=".75" 
                      specularExponent="20" lighting-color="#bbbbbb" 
                      result="speculaireSortie">
    <fePointLight x="-5000" y="-10000" z="20000"/>
  </feSpecularLighting>
  <feComposite in="speculaireSortie" in2="SourceAlpha" operator="in" result="speculaireSortie"/>
  <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
               k1="0" k2="1" k3="1" k4="0" result="peintureEclairee"/>
  <feMerge>
    <feMergeNode in="flouDecalage"/>
    <feMergeNode in="peintureEclairee"/>
  </feMerge>
</filter>

Les images suivantes montrent les résultats intermédiaires obtenus à partir de chacun des éléments de filtre :

1. La primitive de filtre 'feGaussianBlur' reçoit en entrée la valeur de l'attribut SourceAlpha, qui est le canal alpha du graphique source. Le résultat est stocké dans un tampon temporaire nommé "flou". Remarquer que "flou" est utilisé comme entrée pour les deux primitives de filtre 2 et 3 ;
2. La primitive de filtre 'feOffset' prend le tampon "flou", déplace le résultat dans une direction positive, à la fois dans x et y, puis crée un nouveau tampon nommé "flouDecalage". L'effet produit est celui d'un ombrage ;
3. La primitive de filtre 'feSpecularLighting' utilise le tampon "blur" comme modèle pour une élévation de surface et génère un effet de lumière provenant d'une seule source. Le résultat est stocké dans le tampon "speculaireSortie" ;
4. La primitive de filtre 'feComposite' applique un masque sur le résultat de la primitive de filtre 3 par le canal alpha de la source graphique originale, ainsi le résultat intermédiaire n'est pas plus grand que le graphique source original ;
5. La primitive de filtre 'feComposite' compose le résultat de l'éclairage spéculaire avec le graphique source original ;
6. La primitive de filtre 'feMerge' compose deux couches ensemble. La couche inférieure consiste du résultat de l'ombrage de la primitive de filtre 2. La couche supérieure consiste de l'éclairage spéculaire qui résulte de la primitive de filtre 5.

15.3 L'élément 'filter'

La description de l'élément 'filter' suit :

<!ENTITY % filterExt "" >
<!ELEMENT filter (%descTitleMetadata;,(feBlend|feFlood|
  feColorMatrix|feComponentTransfer|
  feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|
  feGaussianBlur|feImage|feMerge|
  feMorphology|feOffset|feSpecularLighting|
  feTile|feTurbulence|
  animate|set
  %filterExt;)*) >
<!ATTLIST filter
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  %langSpaceAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-All;
  filterUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  primitiveUnits (userSpaceOnUse | objectBoundingBox) #IMPLIED
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED
  width %Length; #IMPLIED
  height %Length; #IMPLIED
  filterRes %NumberOptionalNumber; #IMPLIED >

Les propriétés, dans l'élément 'filter', héritent des ancêtres de celui-ci ; les propriétés n'héritent pas de l'élément qui appelle l'élément 'filter'.

Les éléments 'filter' ne sont jamais rendus directement ; leur seule utilisation est comme quelque chose qu'on peut appeler avec la propriété 'filter'. La propriété 'display' ne s'applique pas aux éléments 'filter' ; ainsi, les éléments 'filter' ne sont pas rendus directement, même si la propriété 'display' a une valeur autre que none, et ils peuvent être appelés, même si la propriété 'display', sur l'élément 'filter' ou l'un de ses ancêtres, a une valeur de none.

15.4 La propriété 'filter'

La description de la propriété 'filter' est comme suit :

<uri>

Une référence d'URI vers un élément 'filter' qui définit l'effet de filtre devant être appliqué à cet élément.

none

N'applique aucun effet de filtre à cet élément.

15.5 La région des effets de filtre

Un élément 'filter' peut définir une région du canevas sur laquelle un effet de filtre donné s'applique et peut fournir une résolution pour toute image intermédiaire en tons continus utilisée pour le traitement de toute primitive de filtre basée sur une trame de pixélisation. L'élément 'filter' admet les attributs suivants dont l'action se conjugue pour définir la région de l'effet de filtre :

• filterUnits={ userSpaceOnUse | objectBoundingBox }.
  Définit le système de coordonnées pour les attributs x, y, width, height.
  Pour une spécification filterUnits="userSpaceOnUse", les attributs x, y, width, height représentent des valeurs dans le système de coordonnées utilisateur courant en vigueur au moment où l'élément 'filter' est appelé (i.e., le système de coordonnées utilisateur de l'élément qui appelle l'élément 'filter' vi une propriété 'filter').
  Pour une spécification filterUnits="objectBoundingBox", alors les attributs x, y, width, height représentent des fractions ou des pourcentages de la boîte englobante de l'élément appelant (voir la section Les unités de la boîte englobante de l'objet).
  Si l'attribut filterUnits n'est pas spécifié, alors l'effet est comme si une valeur de objectBoundingBox était spécifiée.
  Animable : oui.
• Les attributs x, y, width, height, qui définissent une région rectangulaire du canevas sur laquelle ce filtre s'applique.
  La quantité de mémoire et le temps de traitement requis pour l'application du filtre dépendent de la taille de ce rectangle et de l'attribut filterRes du filtre.
  Le système de coordonnées pour ces attributs dépend de la valeur de l'attribut filterUnits.
  Une valeur négative pour width, ou height, provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément qui a appelé le filtre.
  Les limites de ce rectangle se comporte comme une région de rognage exacte pour chaque primitive de filtre inclue dans un élément 'filter' donné ; ainsi, si l'effet d'une primitive de filtre devait s'étendre au-delà des limites du rectangle (ceci se produit parfois quand on utilise la primitive de filtre 'feGaussianBlur' avec un attribut stdDeviation important), des parties de l'effet seront rognées.
  Si les attributs x ou y ne sont pas spécifiés, l'effet produit est comme si une valeur de "-10%" était spécifiée.
  Si les attributs width ou height ne sont pas spécifiés, l'effet produit est comme si une valeur de "120%" était spécifiée.
  Animable : oui.
• filterRes (qui a la forme pixels-x [pixels-y]) indiquet la largeur et la hauteur des images intermédiaires en pixels. Si l'attribut n'est pas fourni, alors une résolution par défaut raisonnable appropriée à l'appareil cible sera utilisée. (Pour les écrans, par défaut, une résolution d'affichage appropriée serait celle en pixels de l'écran courant. Pour l'impression, une résolution d'imprimante commune approprié telle que 400dpi serait une valeur par défaut).
  L'assignation d'un valeur autre que celle par défaut à cet attribut devrait être effectuée avec soin. Une valeur trop petite pourrait conduire à une pixélisation inattendue du résultat. Une valeur trop grande entraîner un traitement lent et une grande consommation de mémoire.
  Une valeur négative provoque une erreur (voir Le traitement des erreurs). Une valeur de zéro désactive le rendu de l'élément qui a appelé le filtre.
  Animable : oui.

Remarquer que les deux valeurs possibles pour l'attribut filterUnits (i.e., objectBoundingBox et userSpaceOnUse) conduisent à une région de filtre dont l'axe-x et l'axe-y du système de coordonnées sont parallèles, respectivement, aux axe-x et axe-y du système de coordonnées utilisateur de l'élément sur lequel le filtre sera appliqué.

Les implémenteurs peuvent parfois obtenir de meilleures performances quand on peut faire correspondre directement la région de filtre avec les pixels de l'appareil ; ainsi, pour la meilleure performance sur les appareils d'affichage, on suggère aux auteurs de définir leur région de telle manière que les agents utilisateurs SVG puissent aligner la région de filtre, pixel-à-pixel, sur l'arrière-plan. Notamment, pour la meilleure performance d'un effet de filtre, éviter de pivoter ou d'incliner le système de coordonnées utilisateur. Les valeurs explicites pour l'attribut filterRes peuvent soit favoriser, soit nuire aux performances. Si la valeur de filterRes est plus petite que la résolution du filtre automatique (i.e., par défaut), alors l'effet de filtre peut avoir une meilleure performance (généralement, au détriment de la qualité). Si la valeur de filterRes est plus grande que la résolution du filtre automatique (i.e., par défaut), alors la performance de l'effet de filtre sera généralement moindre.

Il est souvent nécessaire de donner un espacement environnant parce que l'effet de filtre peut agir sur des bits légèrement en-dehors de la boîte englobante resserrée d'un objet. Pour cela, on peut donner des valeurs en pourcentage négatives aux attributs x et y et des valeurs de pourcentage supérieures à "100%" aux attributs width et height. C'est la raison pour laquelle les valeurs par défaut de la région de l'effet du filtre sont x="-10%" y="-10%" width="120%" height="120%".

15.6 L'accès à l'image d'arrière-plan

Il existe deux pseudo-entrées d'image pour les effets de filtre, qui sont BackgroundImage et BackgroundAlpha, chacune représentant un cliché-image du canevas en-dessous de la région du filtre au moment où l'élément 'filter' est invoqué. L'entrée BackgroundImage représente à la fois les valeurs de couleur et du canal alpha du canevas (i.e., des valeurs de pixel RGBA), alors que BackgroundAlpha représente le seul canal alpha.

Les implémentations des agents utilisateurs SVG devront souvent maintenir des tampons supplémentaires de l'image d'arrière-plan pour gérer les pseudo-entrées d'image BackgroundImage et BackgroundAlpha. Certaines fois, les tampons d'image d'arrière-plan contiendront un copie en mémoire des opérations de peinture accumulées sur le canevas courant.

Comme les tampons d'image en mémoire peuvent consommer des ressources systèmes conséquentes, le contenu SVG doit indiquer explicitement à l'agent utilisateur que le document nécessite un accès à l'image d'arrière-plan avant de pouvoir utiliser les pseudo-entrées d'image BackgroundImage et BackgroundAlpha. C'est la propriété 'enable-background' qui active l'accès à l'image d'arrière-plan :

La propriété 'enable-background', qui ne s'applique qu'aux éléments conteneurs, gère l'accumulation de l'image d'arrière-plan.

Une valeur de new indique deux choses :

• Elle active la capacité d'accès des enfants, de l'élément conteneur courant, à l'image d'arrière-plan ;
• Elle indique l'établissement d'un nouveau (i.e., initialement, noir transparent) canevas d'image d'arrière-plan et (de ce fait) que tous les enfants de l'élément conteneur seront rendus dans ce nouveau canevas d'image d'arrière-plan, en plus d'être rendus sur l'appareil cible.

La signification de enable-background: accumulate (la valeur initiale/par défaut) dépend du contexte :

• Si un élément conteneur ancêtre a une valeur de propriété 'enable-background:new', alors tous les éléments graphiques dans l'élément conteneur courant sont rendus à la fois sur le canevas de l'image d'arrière-plan de l'élément conteneur parent et sur l'appareil cible ;
• Sinon, il n'y a pas de canevas d'image d'arrière-plan et il n'est besoin de rendre les éléments graphiques que sur l'appareil cible. (Aucun besoin de les rendre sur le canevas d'image d'arrière-plan).

Si un effet de filtre spécifie l'une ou l'autre pseudo-entrée d'image BackgroundImage ou BackgroundAlpha et si aucun élément conteneur ancêtre n'a une valeur de propriété 'enable-background:new', alors la requête de l'image d'arrière-plan constitue techniquement une erreur. Le traitement continuera sans interruption (i.e., aucun message d'erreur) et une image noire transparente sera renvoyée en réponse à cette requête.

Les paramètres optionnels <x>,<y>,<largeur>,<hauteur> de la valeur new désigne la sous-région de l'espace utilisateur de l'élément conteneur sur laquelle l'accès à l'image d'arrière-plan est autorisé à survenir. Ces paramètres induisent éventuellement l'agent utilisateur à allouer des tampons d'image temporaires plus petits que ceux des valeurs par défaut, ces dernières pouvant demander à l'agent utilisateur SVG une allocation des tampons aussi grande que la zone de visualisation courante. Ainsi, les valeurs <x>,<y>,<largeur>,<hauteur> agissent comme un rectangle de rognage net sur le canevas de l'image d'arrière-plan. Une valeur négative pour <largeur>, ou <hauteur>, provoque une erreur (voir Le traitement des erreurs). Si on spécifie au moins une mais moins que quatre des valeurs <x>,<y>,<largeur> et <hauteur> ou si on ne spécifie aucune valeur pour <largeur> ou <hauteur>, les pseudo-entrées BackgroundImage et BackgroundAlpha sont traitées comme si le traitement de l'image d'arrière-plan n'était pas activé.

Supposons que l'on ait un élément E dans le document et que E ait une succession d'ancêtres A₁ (son parent immédiat), A₂, etc. (Remarque : A₀ est E). Chaque ancêtre A_i aura un tampon d'image d'arrière-plan correspondant hors-écran TAMPON_i. Le contenu de l'image d'arrière-plan qui est disponible pour un élément 'filter', appelé par E, est défini comme suit :

• Trouver l'élément A_i avec le plus petit indice i (y compris A₀ = E) dont la propriété 'enable-background' a la valeur new. (Remarque : s'il n'y a pas un tel élément ancêtre, alors aucune image d'arrière-plan n'est disponible pour E, auquel cas une image noire transparente fera office d'image d'arrière-plan pour E) ;
• Pour chaque A_i (de i=n à 1), initialiser TAMPON_i à noir transparent. Rendre tous les enfants de A_i jusqu'à A_i-1 exclus dans TAMPON_i. Les enfants sont peints, puis filtrés, masqués et composés selon les divers paramétrages de peinture, de filtre, de rognage, de masquage et d'opacité d'objet de l'enfant donné. Tous les effets de filtre, les masquages et les opacités de groupe qui pourraient concerner A_i ne s'appliquent pas lors du rendu des enfants de A_i dans TAMPON_i.
  (Remarquer que dans le cas où A₀ = E, le contenu graphique de E n'est pas rendu dans TAMPON₁ et, de ce fait, ne fait pas partie de l'image d'arrière-plan disponible pour E. Plutôt, le contenu graphique de E est disponible via les pseudo-entrées d'image SourceGraphic et SourceAlpha) ;
• Ensuite, pour chaque A_i (de i=1 à n-1), composer TAMPON_i dans TAMPON_i+1 ;
• Le résultat cumulé (i.e., TAMPON_n) représente l'image d'arrière-plan disponible pour E.

L'exemple enable-background01 illustre les règles pour le traitement d'une image d'arrière-plan.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple enable-background01</title>
  <desc>Ce galop d'essais montre cinq dessins qui illustrent les règles
        pour le traitement d'une image d'arrière-plan.</desc>

  <defs>
    <filter id="ArrPlanDeplaceFlou" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        Ce filtre écarte la constante SourceGraphic, s'il y en a une, et ne produit que
        le déplacement de BackgroundImage de 125 unités vers le bas
        puis applique un flou.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" />
    </filter>
    <filter id="ArrPlanDeplaceFlou_sansSourceGraphic" 
            filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
      <desc>
        Ce filtre prend BackgroundImage, le déplace de 125 unités vers le bas, applique un flou
        puis rend SourceGraphic par-dessus l'arrière-plan déplacé et flou.
      </desc>
      <feOffset in="BackgroundImage" dx="0" dy="125" />
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <g transform="translate(0,0)">
    <desc>La première image est le graphique de référence sans filtre.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(270,0)">
    <desc>La deuxième ajoute un élément 'g' vide qui invoque ArrPlanDeplaceFlou.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <g filter="url(#ArrPlanDeplaceFlou)"/>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(540,0)">
    <desc>La troisième invoque ArrPlanDeplaceFlou sur le groupe interne.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g filter="url(#ArrPlanDeplaceFlou)" opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(810,0)">
    <desc>Le quatrième invoque ArrPlanDeplaceFlou sur le triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ArrPlanDeplaceFlou)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>

  <g enable-background="new" transform="translate(1080,0)">
    <desc>Le cinquième invoque ArrPlanDeplaceFlou_sansSourceGraphic sur le triangle.</desc>
    <rect x="25" y="25" width="100" height="100" fill="red"/>
    <g opacity=".5">
      <circle cx="125" cy="75" r="45" fill="green"/>
      <polygon points="160,25 160,125 240,75" fill="blue"
               filter="url(#ArrPlanDeplaceFlou_sansSourceGraphic)"/>
    </g>
    <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
  </g>
</svg>

Exemple enable-background01

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

L'exemple ci-dessus se décompose en cinq parties, décrites comme suit :

1. Le premier jeu représente le graphique de référence. Celui-ci consiste en un rectangle rouge suivi d'un élément 'g' transparent à 50%. Dans l'élément 'g' se trouvent un cercle vert qui recouvre partiellement le rectangle et un triangle bleu qui recouvre partiellement le cercle. Les trois objets sont ensuite entourés par un rectangle avec un liseré bleu mince. Aucun filtre n'est appliqué à ce graphique de référence ;
2. Le deuxième jeu active le traitement de l'image d'arrière-plan et ajoute un élément 'g' vide qui invoque le filtre ArrPlanDeplaceFlou. Ce filtre prend en entrée l'image d'arrière-plan cumulée courante (i.e., le graphique de référence en entier), la déplace hors-écran vers le bas, lui applique un flou puis transcrit le résultat sur canevas. Remarquer que le hors-écran pour le filtre est initialisé au noir transparent, ce qui permet au rectangle, au cercle et au triangle déjà rendus de transparaître après que le filtre a rendu son propre résultat sur le canevas ;
3. Le troisième jeu active le traitement de l'image d'arrière-plan et, autrement, invoque le filtre ArrPlanDeplaceFlou sur l'élément 'g' interne. L'arrière-plan cumulé, au moment de l'application du filtre, ne contient que le rectangle rouge. Ceci du fait que les enfants de l'élément 'g' interne (i.e., le cercle et le triangle) ne font pas partie de l'arrière-plan de cet élément 'g' interne et, comme le filtre ArrPlanDeplaceFlou ignore la valeur SourceGraphic, les enfants de l'élément 'g' interne n'apparaissent pas dans le résultat ;
4. Le quatrième jeu active le traitement de l'image d'arrière-plan et invoque le filtre ArrPlanDeplaceFlou sur l'élément 'polygon' qui dessine le triangle. L'arrière-plan cumulé, au moment de l'application du filtre, contient le rectangle rouge plus le cercle vert qui ignorent l'effet de la propriété 'opacity' sur l'élément 'g'. (Remarquer que le cercle vert flou, en bas, ne laisse pas transparaître le rectangle rouge à sa gauche. Ceci est dû à l'ignorance de la propriété 'opacity'). Comme le triangle lui-même ne fait pas partie de l'arrière-plan cumulé et comme le filtre ArrPlanDeplaceFlou ignore la valeur SourceGraphic, le triangle n'apparaît pas dans le résultat ;
5. Le cinquième jeu reproduit le quatrièem, sauf que c'est le filtre ArrPlanDeplaceFlou_sansSourceGraphic qui est invoqué, au lieu de ArrPlanDeplaceFlou. Le filtre ArrPlanDeplaceFlou_sansSourceGraphic réalise le même effet que ArrPlanDeplaceFlou, mais rend SourceGraphic par-dessus l'image d'arrière-plan déplacée et floue. Dans ce cas, SourceGraphic représente le triangle bleu ; ainsi, le résultat est identique à celui du quatrième jeu, à la différence que le triangle bleu apparaît maintenant.

15.7 Aperçu sur les primitives de filtre

15.7.1 Aperçu

Cette section décrit les diverses primitives de filtre pouvant être assemblées pour obtenir un effet de filtre particulier.

À moins d'être précisé autrement, tous les filtres d'image opèrent sur des échantillons RGBA prémultipliés. Les filtres dont l'action est plus naturelle sur des données non prémultipliées (feColorMatrix et feComponentTransfer) déferont temporairement puis referont une prémultiplication comme spécifié. Toutes les opérations d'effet de filtre pixélisé prennent en entrée 1 à N images RGBA, des attributs supplémentaires comme paramètres et produisent en sortie une seule image RGBA.

Le résultat RGBA de chaque primitive de filtre sera ramené dans les plages de valeurs de couleur et de valeurs d'opacité permises. Ainsi, par exemple, les valeurs de couleur ou d'opacité négatives seront ajustées sur une valeur de couleur/opacité de zéro dans le résultat d'une primitive de filtre donnée.

L'espace de couleur, dans lequel une primitive de filtre particulière opère, est déterminé par la valeur de la propriété 'color-interpolation-filters' sur la primitive de filtre en question. Une autre propriété 'color-interpolation' détermine l'espace de couleur pour d'autres opérations de couleur. Ces deux propriétés ayant des valeurs initiales différentes ('color-interpolation-filters' a une valeur initiale de linearRGB, alors que 'color-interpolation' a une valeur initiale de sRGB), dans certains cas où il faut obtenir des résultats particuliers (par exemple, pour la coordination d'une interpolation de dégradé et d'une opération de filtre), il sera nécessaire de spécifier explicitement la propriété 'color-interpolation' à linearRGB, ou la propriété 'color-interpolation-filters' à sRGB, sur des éléments particuliers. Remarquer que les exemples ci-dessous ne spécifient aucune valeur explicite pour l'une ou l'autre propriétés 'color-interpolation' et 'color-interpolation-filters', c'est ainsi leur valeur initiale qui s'applique.

15.7.2 Les attributs communs

Les attributs suivants sont disponibles pour toutes les primitives de filtre :

<!ENTITY % filter_primitive_attributes
  "x %Coordinate; #IMPLIED
   y %Coordinate; #IMPLIED
   width %Length; #IMPLIED
   height %Length; #IMPLIED
   result CDATA #IMPLIED" >

<!ENTITY % filter_primitive_attributes_with_in
  "%filter_primitive_attributes;
   in CDATA #IMPLIED">

15.7.3 La sous-région d'une primitive de filtre

Toutes les primitives de filtre ont des attributs x, y, width et height qui identifient une sous-région où le calcul et le rendu de la primitive de filtre donnée se restreignent. Ces attributs sont définis en fonction des mêmes règles que pour les attributs de coordonnée et de longueur des autres primitives de filtre, ainsi ils représentent des valeurs dans le système de coordonnées établit par l'attribut primitiveUnits sur l'élément 'filter'.

Les attributs x, y, width et height se rabattent par défaut à l'union (i.e., la boîte englobante de logement la plus serrée) des sous-régions définies pour tous les nœuds appelés. S'il n'y a pas de nœuds appelés (par exemple, pour les primitives 'feImage' ou 'feTurbulence') ou si l'un ou plusieurs des nœuds appelés est une entrée standard (parmi SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint ou StrokePaint) ou si c'est la primitive 'feTile' (qui est particulière en ce sens que sa fonction principale consiste à répliquer le nœud appelé sur X et Y, produisant ainsi un résultat généralement plus grand), la sous-région par défaut est 0%,0%,100%,100%, où les pourcentages se rapportent aux dimensions de la région de filtre.

Les attributs x, y, width et height agissent comme un rectangle de rognage net.

Toutes les images intermédiaires hors-écran sont définies pour ne pas excéder l'intersection désignée par x, y, width et height avec la région de filtre. La région de filtre et toutes les sous-région x, y, width, height doivent être réglées de façon à ce que toutes les images hors-écran soient suffisamment grande pour accomoder tout pixel qui pourrait se trouver à l'intersection, même partiellement, soit de la région de filtre, soit des sous-régions x,y,width,height.

La primitive 'feTile' référence une primitive de filtre précédente, puis assemble les carreaux de mosaïque en fonction des valeurs des attributs x, y, width et height de la primitive de filtre appelée pour remplir sa propre sous-région de primitive de filtre.

15.8 Les éléments et les propriétés de source lumineuse

15.8.1 Introduction

Les sections suivantes définissent les élément qui décrivent une source lumineuse, à savoir 'feDistantLight', 'fePointLight' et 'feSpotLight', et la propriété 'lighting-color', qui définit la couleur de la lumière.

15.8.2 La source lumineuse 'feDistantLight'

<!ELEMENT feDistantLight (animate|set)* >
<!ATTLIST feDistantLight
  %stdAttrs;
  azimuth %Number; #IMPLIED
  elevation %Number; #IMPLIED >

15.8.3 La source lumineuse 'fePointLight'

<!ELEMENT fePointLight (animate|set)* >
<!ATTLIST fePointLight
  %stdAttrs;
  x %Number; #IMPLIED
  y %Number; #IMPLIED
  z %Number; #IMPLIED >

15.8.4 La source lumineuse'feSpotLight'

<!ELEMENT feSpotLight (animate|set)* >
<!ATTLIST feSpotLight
  %stdAttrs;
  x %Number; #IMPLIED
  y %Number; #IMPLIED
  z %Number; #IMPLIED
  pointsAtX %Number; #IMPLIED
  pointsAtY %Number; #IMPLIED
  pointsAtZ %Number; #IMPLIED
  specularExponent %Number; #IMPLIED
  limitingConeAngle %Number; #IMPLIED >

15.8.5 La propriété 'lighting-color'

La propriété 'lighting-color' définit la couleur de la source lumineuse pour les primitives de filtre 'feDiffuseLighting' et 'feSpecularLighting'.

15.9 La primitive de filtre 'feBlend'

Ce filtre compose deux objets à l'aide de modes de mélange couramment employés par les logiciels d'imagerie. Il effectue une combinaison au pixel de deux images en entrée.

<!ELEMENT feBlend (animate|set)* >
<!ATTLIST feBlend
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  in2 CDATA #REQUIRED
  mode (normal | multiply | screen | darken | lighten) "normal" >

Pour tous les modes de feBlend, l'opacité résultante se calcule comme suit :

qr = 1 - (1-qa)*(1-qb)

Voici les définitions qui s'appliquent aux formules de composition ci-dessous :

cr = Couleur résultante (RGB) - prémultipliée 
qa = Valeur d'opacité à un pixel donné pour l'image A
qb = Valeur d'opacité à un pixel donné pour l'image B 
ca = Couleur (RGB) à un pixel donné pour l'image A - prémultipliée 
cb = Couleur (RGB) à un pixel donné pour l'image B - prémultipliée 

Le tableau suivant donne la liste des modes de mélange d'images disponibles :

Le mode de mélange 'normal' est équivalent à la spécification operator="over" sur la primitive de filtre 'feComposite', correspond à la méthode de mélange utilisée par l'élément 'feMerge' et correspond à la technique de composition alpha simple utilisée dans SVG pour toute composition en-dehors des effets de filtre.

L'exemple feBlend illustre les cinq modes de mélange.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple feBlend - les modes de mélange feBlend</title>
  <desc>Cinq chaînes textuelles mélangées à un dégradé,
        une chaîne pour chacun des modes de mélange de feBlend.</desc>
  <defs>
    <linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="498" height="498"/>
  <g enable-background="new" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MonDegrade)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
  </g>
</svg>

Exemple feBlend

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.10 La primitive de filtre 'feColorMatrix'

Ce filtre applique une matrice de transformation :

| R' |     | a00 a01 a02 a03 a04 |   | R |

| G' |     | a10 a11 a12 a13 a14 |   | G |

| B' |  =  | a20 a21 a22 a23 a24 | * | B |

| A' |     | a30 a31 a32 a33 a34 |   | A |

| 1  |     |  0   0   0   0   1  |   | 1 |

sur les valeurs de couleur et alpha RGBA de chaque pixel du graphique en entrée pour produire un résultat avec un nouveau jeu de valeurs de couleur et alpha RGBA.

Les calculs s'effectuent sur des valeurs de couleurs non prémultipliées. Si le graphique en entrée consiste en valeurs de couleur prémultipliées, celles-ci sont automatiquement converties en valeurs non prémultipliées pour cette opération.

Ces matrices effectuent souvent une correspondance à l'identique dans le canal alpha. Auquel cas, une implémentation peut éviter le coûteux défaire et refaire de la prémultiplication en donnant à tous les pixels une valeur A=1.

<!ELEMENT feColorMatrix (animate|set)* >
<!ATTLIST feColorMatrix
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in;
  type (matrix | saturate | hueRotate | luminanceToAlpha) "matrix"
  values CDATA #IMPLIED >

L'exemple feColorMatrix illustre les quatre types d'opérations de feColorMatrix.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>Exemple feColorMatrix - les opérations de feColorMatrix</title>
  <desc>Cinq chaînes textuelles montre les effets de feColorMatrix: 
        - une chaîne textuelle non filtrée qui est la référence ; 
        - l'option matrix de feColorMatrix pour une conversion en niveaux de gris ;
        - l'option saturate de feColorMatrix ;
        - l'option hueRotate de feColorMatrix ;
        - l'option luminanceToAlpha de feColorMatrix.</desc>
  <defs>
    <linearGradient id="MonDegrade" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="500" y2="0">
      <stop offset="0" stop-color="#ff00ff" />
      <stop offset=".33" stop-color="#88ff88" />
      <stop offset=".67" stop-color="#2020ff" />
      <stop offset="1" stop-color="#d00000" />
    </linearGradient>
    <filter id="Matrix" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values=".33 .33 .33 0 0 
                   .33 .33 .33 0 0 
                   .33 .33 .33 0 0 
                   .33 .33 .33 0 0"/>
    </filter>
    <filter id="Saturate40" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="40%"/> « errata 2002-11-15 »
    </filter>
    <filter id="HueRotate90" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
    </filter>
    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" 
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="798" height="498"/>
  <g font-family="Verdana" font-size="75" 
            font-weight="bold" fill="url(#MonDegrade)" >
    <rect x="100" y="0" width="500" height="20" />
    <text x="100" y="90">Pas de filtre</text>
    <text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
    <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
  </g>
</svg>

Exemple feColorMatrix

Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
 

15.11 La primitive de filtre 'feComponentTransfer'

Cette primitive de filtre élabore une nouvelle carte des données, selon la composante et pour chaque pixel, comme suit :

R' = feFuncR( R )
G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

Elle autorise des opérations comme l'ajustement de la luminosité, du contraste, de l'équilibre des couleurs ou du seuil.

Les calculs s'effectue sur des valeurs de couleur non prémultipliées. Si le graphique en entrée consiste en valeurs de couleur prémultipliées, celles-ci sont automatiquement converties en valeurs de couleur non prémultipliées pour cette opération. (Remarquer que le défaire et le refaire de la prémultiplication peuvent être évités si la composante feFuncA est la transformation à l'identique et si toutes les valeurs alpha du graphique source sont mises à 1).

<!ELEMENT feComponentTransfer (feFuncR?,feFuncG?,feFuncB?,feFuncA?) >
<!ATTLIST feComponentTransfer
  %stdAttrs;
  %PresentationAttributes-FilterPrimitives;
  %filter_primitive_attributes_with_in; >

<!ENTITY % component_transfer_function_attributes
  "type (identity | table | discrete | linear | gamma) #REQUIRED
   tableValues CDATA #IMPLIED
   slope %Number; #IMPLIED
   intercept %Number; #IMPLIED
   amplitude %Number; #IMPLIED
   exponent %Number; #IMPLIED
   offset %Number; #IMPLIED" >

<!ELEMENT feFuncR (animate|set)* >
<!ATTLIST feFuncR
  %stdAttrs;
  %component_transfer_function_attributes; >

<!ELEMENT feFuncG (animate|set)* >
<!ATTLIST feFuncG
  %stdAttrs;
  %component_transfer_function_attributes; >

<!ELEMENT feFuncB (animate|set)* >
<!ATTLIST feFuncB
  %stdAttrs;
  %component_transfer_function_attributes; >

<!ELEMENT feFuncA (animate|set)* >
<!ATTLIST feFuncA
  %stdAttrs;
  %component_transfer_function_attributes; >

La spécification des fonctions de transfert est définie par les sous-éléments de 'feComponentTransfer' :

'feFuncR', la fonction de transfert pour la composante rouge du graphique en entrée

'feFuncG', la fonction de transfert pour la composante verte du graphique en entrée

'feFuncB', la fonction de transfert pour la composante bleue du graphique en entrée

'feFuncA', la fonction de transfert pour la composante alpha du graphique en entrée

Les attributs ci-dessous s'appliquent aux sous-éléments 'feFuncR', 'feFuncG', 'feFuncB' et 'feFuncA' qui définissent les fonctions de transfert.