Les filtres simples en SVG

Vous devez trouver que mes dessins sont enfantins et vous avez raison. Il n'y a pas de floutage, par d'ombrage, pas de dégradé. Pour que des dessins numériques aient un côté plus artistique il faut utiliser entre autres les ombrages et les floutages.

Les floutages et ombrages sont produits grâce à des filtres.
On commence par définir les filtres puis on les applique à des objets de la page (objets SVG ou HTML).
Un filtre est défini grâce à la balise filter avec l'attribut id pour identifier le filtre.
S'agissant de définitions les éléments filter doivent être contenus dans le conteneur defs.

Dans cette page je vais présenter des filtres simples c'est à dire basés sur une seule "primitive".

Appliquer un filtre SVG à des objets SVG et HTML

jolie fille nue

Le code correspondant

<svg width="50%" height="50%" viewBox ="0 0 400 200"> <defs> <filter id="flou"> <feGaussianBlur stdDeviation="6" /> </filter> </defs> <g style = "fill-opacity : 0.5 ; stroke-width : 5px;" filter = 'url(#flou)' > <rect x="25" y="25" fill = "orange" stroke="olive" width = '100' height = '100' ry ='10' /> <rect x="150" y="75" fill = 'yellow' stroke = 'purple' width = '200' height = '100' rx = '15' /> </g> </svg> <img width ="50%" src ="../images/jolie_fille.jpg" style ="filter : url(#flou) ;" />

Commmentaire du code

Vous constatez que les rectangles ainsi que la photo sont floutés. On parle de flou gaussien.

J'ai défini un flou gaussien avec le conteneur filter incluant la balise feGaussianBlur.
On dit que feGaussianBlur est une primitive.
Ce filtre est identifié "flou".
Pour diminuer le floutage il suffirait de réduire la valeur de l'attribut stdDeviation.

Le flou défini en SVG a été appliqué à un objet SVG (un groupe de formes) via l'attribut filter.
Ce floutage est aussi appliqué à un élément HTML (la balise img) via la propriété CSS filter. En effet le CSS3 propose désormais cette propriété et la valeur de la propriété peut être la référence à un filtre défini en SVG.

La primitive feFlood

Le code SVG correspondant

<svg width="400" height="300"> <defs> <filter id="gris"> <feFlood flood-opacity = "0.5" flood-color ="rgb(0,0,0)"/> </filter> </defs> <rect x="25" y="25" width = '125' height = '100' filter = 'url(#gris)' /> <rect x="150" y="75" width = '200' height = '100' filter = 'url(#gris)' /> </svg>

Commentaire

Dans le canevas deux rectangles remplis de noir a demi opaques (ou à demi transparents). C'est pour cette raison qu'à l'intersection des deux formes ont a du noir.
Or dans chaque balise rect on ne retrouve ni l'attribut fill ni l'attribut fill-opacity ...
Par contre il y a l'attribut filter avec la valeur gris qui est l'identifiant d'un filtre basé sur la primitive feFlood. La primitive feFlood permet de remplir uniformément une zone d’une couleur. La couleur et son opacité sont indiquées grâce aux attributs flood-color et flood-opacity associés à la primitive feFlood.

La primitive feOffset

Un rectangle et son ombre Une ellipse et son ombre

Le code SVG correspondant

<svg width="50%" height="50%" viewBox ="0 0 400 300"> <defs> <filter id="decale"> <feOffset dx="20" dy ="20"/> </filter> </defs> <title>Un rectangle et son ombre</title> <rect x="50" y="50" width = '100' height = '100' fill ='gray' filter="url(#decale)"/> <rect x="50" y="50" width = '100' height = '100' fill ='red'/> <title>Une ellipse et son ombre</title> <ellipse cx ="200" cy="200" rx ="100" ry ="50" fill ="gray" filter="url(#decale)" /> <ellipse cx ="200" cy="200" rx ="100" ry ="50" fill ="green" /> </svg>

Commentaire

La primitive feOffset décale tout simplement la forme selon les valeurs des attributs dx et dy.

Observez bien le code SVG. Les deux rectangles ont exactement les mêmes coordonnées pour l'arête supérieure gauche et les mêmes dimensions et pourtant le rectangle rempli de gris est décalé de 20 pixels en bas et à droite car il lui a été affecté le filtre identifié "decale".
Les deux ellipses ont aussi les mêmes coordonnées mais l'ellipse grise est aussi décalée de 20px par rapport à la verte.

Donc j'ai créé un effet d'ombre. Vous allez rétorquer à juste titre qu'une ombre c'est non seulement la même forme remplie de gris et décalée par rapport à la forme principale en premier plan mais que la forme grise doit être aussi légèrement floutée.

Il y a un deuxième bémol. L'ellipse grise est tronquée ...

Pour produire une ombre véritable il faudrait donc jouer sur deux primitives : feOffset et feGaussianBlur. Il faudrait donc créer un filtre basé sur ces deux primitives. Les filtres basés sur plusieurs primitives sont évoqués dans la page suivante.

La primitive feImage

Le code SVG correspondant

<svg width="50%" height="50%" viewBox ="0 0 400 300" > <defs> <filter id="image"> <feImage xlink:href ="../images/jolie_fille.jpg" width="160" height="200" /> </filter> </defs> <rect x="0" y="20" width = '160' height = '200' filter ="url(#image)"/> <rect x="200" y="200" width = '120' height = '150' filter ="url(#image)"/> </svg>

Commentaire

La primitive feImage permet d’importer une image dans un filtre.
Cette primitive se comporte exactement comme la balise image ; on peut donc utiliser les attributs x, y, width, height.

La primitive feMorphology

Le code SVG correspondant (extraits)

<svg width="100%" height="100%" viewBox ="0 0 800 200" > <defs> <filter id="dilatation"><feMorphology operator ="dilate" radius ="1" /> </filter> <filter id="dilatation2"><feMorphology operator ="dilate" radius ="2" /></filter> <filter id="contraction"><feMorphology operator ="erode" radius ="1" /></filter> <filter id="contraction2"><feMorphology operator ="erode" radius ="2" /></filter> </defs> <image xlink:href="../images/jolie_fille.jpg" width="160" height ="200" x = "0" y = "0" filter = 'url(#dilatation)' /> <image ... filter = 'url(#dilatation2)' /> <image ... filter = 'url(#contraction)' /> <image ... filter = 'url(#contraction2)' /> </svg>

Commentaire

Les images font penser à des tableaux du courant "impressionniste"
Les deux images de gauche subissent une "dilatation" et celles de droite une "contraction" !

La primitive feMorphology permet de modifier la morphologie de l’image d'une image.
Deux opérations sont possibles : la dilatation et la contraction. L'attribut operator peut prendre en effet deux valeurs erode ou dilate.
Le niveau de contraction ou de dilatation est réglé grâce à l’attribut radius.
Retour menu