Exporter (0) Imprimer
Développer tout

Effets de filtre

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les effets de filtre SVG. Les filtres SVG permettent de manipuler des graphiques —tout comme dans une application telle que Adobe Photoshop—directement à partir du navigateur. Examinez le graphique SVG suivant.

Logo SVG

En utilisant des éléments de filtre SVG, ce graphique simple peut aisément être transformé en une forme d’apparence beaucoup plus attrayante.

Logo SVG avec des éléments de filtre appliqués

Ces deux images sont tirées directement de l’exemple de filtre de la spécification SVG de W3C. Examinons cet exemple canonique. Le premier graphique est simplement constitué de deux chemins d’accès SVG et du texte"SVG". Il est rendu avec le balisage suivant.


<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" /> 
        <!-- Outer hollow area. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> 
        <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> 
    <!-- The text "SVG". -->
  </g>
</g>


Pour appliquer un  effet de filtre SVG à ce groupe <g>, définissez un filtre, nommez-le (par exemple MyFilter) et appliquez-le au groupe comme suit.


<g filter="url(#MyFilter)">
  <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" /> <!-- Outer hollow arena. -->
  <path fill="#D90000" 
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <!-- Inner filled arena. -->
  <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
    <text x="52" y="76">SVG</text> <!-- The "SVG" text. -->
  </g>
</g>


Pour comprendre que le filtre a été utilisé pour créer l’effet dans la seconde image, examinons l’exemple complet. Notez que cet exemple a été légèrement modifié par rapport à l’original pour fonctionner dans un document HTML5 (et non dans un document SVG).


<!DOCTYPE html>
<html><head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example filters01.svg - introducing filter effects</title>
</head><body>
  <svg width="7.5cm" height="5cm" viewBox="0 0 200 120">
    <desc>An example that combines multiple filter primitives
          to produce a 3D lighting effect on a graphic. The graphic contains the
          string "SVG" sitting on top of an oval filled in red
          and surrounded by an oval outlined in red.</desc>
    <defs>
      <filter id="MyFilter" filterUnits="userSpaceOnUse">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
        <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
        <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                            specularExponent="20" lighting-color="#bbbbbb"  
                            result="specOut">
          <fePointLight x="-5000" y="-10000" z="20000"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
        <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                     k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
        <feMerge>
          <feMergeNode in="offsetBlur"/>
          <feMergeNode in="litPaint"/>
        </feMerge>
      </filter>
    </defs>
    <rect x="1" y="1" width="198" height="118" fill="#888888" stroke="blue" />   
    <g filter="url(#MyFilter)" >
      <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>
</body></html>


D’abord, nous créons une  fenêtre d’affichage SVG qui a la taille correcte et les unités d’utilisateurs appropriées.


<svg width="7.5cm" height="5cm" viewBox="0 0 200 120">

Puis, nous nommons le filtre à l’aide de l’attribut id.


<filter id="MyFilter" filterUnits="userSpaceOnUse">

Ce filtre est constitué de six primitives de filtre numérotées (cinq étant uniques) :

1. feGaussianBlur
2. feOffset
3. feSpecularLighting
4. feComposite
5. feComposite
6. feMerge

Les primitives de filtre peuvent être enchaînées ensemble pour créer des effets très complexes en permettant à la sortie d’une primitive de devenir l’entrée d’une autre. Par exemple, la sortie de feGaussianBlur (result="blur") devient l’entrée de feOffset (in="blur").

Notez que le mot clé SourceGraphic représente l’image d’origine à laquelle le filtre est appliqué. Dans ce cas, l’image source correspond au contenu de l’élément <g>.


<g filter="url(#MyFilter)" >
  <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>


En outre, le mot clé SourceAlpha représente le canal alpha du graphique source. Le canal alpha représente en général les informations de transparence associées à un graphique. Ce composant du graphique source représente ce qui est transmis à la première primitive de filtre, feGaussianBlur, comme le montre l’organigramme suivant.

Organigramme SVG

Les six étapes principales pour le filtre sont numérotées dans l’organigramme précédent et sont expliquées ici :

  1. La primitive de filtre feGaussianBlur reçoit l’entrée SourceAlpha, qui est le canal alpha du graphique source. Le résultat est stocké dans un tampon temporaire nommé "blur". Notez que blur est utilisé comme entrée pour les primitives de filtre 2 et 3.
  2. La primitive de filtre feOffset reçoit blur, déplace le résultat de 4 pixels dans la direction positive x- et y- et crée un nouveau tampon nommé "offsetBlur". Ce tampon est utilisé plus tard pour créer un effet d’ombre portée.
  3. La primitive de filtre feSpecularLighting utilise le tampon "blur" comme modèle d’élévation de surface et génère un effet d’éclairage à partir d’une seule source de point. Le résultat est stocké dans le tampon "specOut".
  4. La primitive de filtre feComposite masque le résultat de la primitive de filtre 3 avec le canal alpha du graphique source d’origine pour que le résultat immédiat ne soit pas plus grand que le graphique source d’origine. Le nom de tampon "specOut" est de nouveau utilisé pour stocker le résultat.
  5. La primitive de filtre feComposite associe le résultat de l’éclairage spéculaire au graphique source d’origine. Le résultat est placé dans le tampon "litPaint".
  6. La primitive de filtre feMerge associe deux couches ensemble. La couche inférieure représente le résultat d’ombre portée de la primitive de filtre 2. La couche supérieure représente le résultat d’éclairage spéculaire de la primitive de filtre 5. Si cela ressemble à un retour en arrière, rappelez-vous que le dernier élément SVG est rendu sur « tous » les éléments SVG rendus précédemment.

Comme le montre l’exemple précédent, les filtres SVG peuvent être utilisés pour créer facilement des graphiques complexes dans le navigateur. Et étant donné que les filtres SVG peuvent être contrôlés avec JavaScript, ils permettent aux développeurs Web de créer des graphiques pour applications riches et des interfaces utilisateur attrayantes et conviviales, dotées notamment d’animations (via JavaScript).

Informations de référence sur les API

SVG Element Reference (les effets de filtre commencent par « fe »)

Exemples et didacticiels

Effets d’effets de filtre SVG
Comment fusionner deux images raster à l’aide de filtres SVG

Démonstrations du site Internet Explorer Test Drive

Hands on: SVG Filter Effects

Billets IEBlog

Effets du filtre SVG dans IE10

Spécification

Scalable Vector Graphics (SVG) 1.1 (Second Edition): Section 15

 

 

Afficher:
© 2015 Microsoft