SVG permet d'utiliser des outils similaires à ceux du langage de description bitmap, comme l'utilisation d'ombres, d'effets de flou ou même la fusion des résultats de différents filtres. Avec l'élément<filter>, il est possible d'ajouter ces effets puis de les attacher à un objet.

Les filtres agissent comme des calques. Lors de leur création, essayez d'appliquer et de tester l'effet étape par étape.

Cet élément possède différents attributs qui aident à créer la région de découpage. Entre les balises de filtre, on peut définir lesprimitives qui permettent de réaliser l'effet souhaité. L'une de ces primitives est<feGaussianBlur>. Le mot-cléSourceAlpha^(angl.) identifie l'entrée pour cette primitive, ici l'entréein. La quantité de flou à appliquer se définit avec l'attributstdDeviation.

Exemple de filtre SVG

<defs>  <filter>    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />  </filter></defs><g filter="url(#drop-shadow)">  <!--Dessin du fantôme ici--></g>

L'exemple ci-dessus ne produira pas le rendu souhaité. Il faut ajouter d'autres primitives de filtre pour obtenir le rendu attendu. En ajoutantfeoffset etresult, le calque d'effet est défini.

L'attribut<result> est une référence qui peut être utilisée plus tard. Il est très différent d'un id XML et ne peut être référencé qu'à l'intérieur dufilter courant. La primitive<feoffset> reçoit le résultat du flou gaussien. La primitive<feMerge> contient les nœuds<feMergeNode> prenant en entrée le résultat offsetBlur, ce qui permet de l'afficher sous lesourceGraphic.

Implémentation de primitives supplémentaires

<defs>  <filter>    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />    <feoffset in="blur" dx="4" dy="4" result="offsetBlur" />    <feMerge>      <feMergeNode in="offsetBlur" />      <feMergeNode in="SourceGraphic" />    </feMerge>  </filter></defs>