Les filtres composites en SVG

Effet d'ombre

un rectangle ombré une ellipse ombrée

Le code SVG correspondant

<svg width="50%" height="50%" viewBox ="0 0 400 300"> <defs> <filter id="ombrage"> <feGaussianBlur stdDeviation="3" result ="flou"/> <feOffset in ="flou" dx="20" dy ="20" /> </filter> </defs> <title>un rectangle ombré</title> <rect x="50" y="50" width = '100' height = '100' fill ='gray' filter="url(#ombrage)" /> <rect x="50" y="50" width = '100' height = '100' fill ='red'/> <title>une ellipse ombrée</title> <ellipse cx="200" cy="200" rx = '100' ry = '50' fill ='gray' filter="url(#ombrage)" /> <ellipse cx="200" cy="200" rx = '100' ry = '50' fill ='red'/> </svg>

Commentaire

Le filtre identifié ombrage est basé sur deux primitives :

Notez l'emploi de l'attribut result pour le première primitive et de l'attribut in pour la deuxième primitive.
Cela veut dire que l'on chaîne les filtres ; la primitive FeOffset s'applique au flou produit par la première primitive et identifié "flou".

Ce filtre composite est appliqué à deux formes grises (un rectangle et une ellipse).
Remarquez qu'encore une fois l'ellipse grise est tronquée. Donc la primitive feOffset n'est pas forcément la meilleure solution pour créer une ombre portée pour un cercle ou une ellipse ...

Combiner feImage et feGaussianBlur

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 350"> <defs> <filter id="image_floue"> <feImage xlink:href ="../images/jolie_fille.jpg" width="160" height="200" result ="image" /> <feGaussianBlur in ="image" stdDeviation="1.5" /> </filter> </defs> <rect x="0" y="20" width = '160' height = '200' filter ="url(#image_floue)"/> <rect x="200" y="200" width = '240' height = '300' filter ="url(#image_floue)"/> </svg>

Commentaire

Chaque rectangle est rempli avec une image floutée. Le filtre identifié image_floue est basé sur deux primitives :

Notez aussi le chaînage avec les attributs result pour la première primitive et in pour la deuxième.

Combiner feImage et feTile

Le code SVG correspondant

<svg width ="50%" height="auto" viewBox="0 0 320 400"> <defs> <filter id="motif"> <feImage xlink:href ="../images/jolie_fille.jpg" width ="80px" height ="100px" x="0" y ="0" result ="jolie" /> <feTile in = "jolie" /> </filter> </defs> <rect x="0" y="0" width = '320' height = '400' filter ="url(#motif)" /> </svg>

Commentaire

Grâce aux primitives feImage et feTile on peut créer des motifs facilement. Vous vous souvenez des motifs ? La balise pattern avec (pour une fois en SVG) une syntaxe un peu indigeste ...

La primitive feTile se contente de répéter horizontalement et verticalement dans la forme l'image passée en paramètre avec la primitive feImage. C'est donc exactement le même principe qu'un motif mais en beaucoup plus simple quant à la syntaxe.

Notez aussi le chaînage avec les attributs result pour la première primitive et in pour la deuxième.
Retour menu