Traduction
Dessiner avec SVG - sommaire
Dessiner avec SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Les floutages et ombrages qui donnent un côté plus realiste aux dessins vectoriels sont produits grâce à des filtres.
Mais grâce aux filtres SVG on peut appliquer aux images insérées d'autres effets qui sont bien connus des utilisateurs de
Photoshop : filtres de couleur, dilatation, contraction, luminosité, contraste, etc.
Un filtre SVG est défini (dans la partie DEFS) grâce à la balise filter.
On applique un filtre à un objet SVG via l'attribut filter
Je vais d'abord vous présenter des filtres simples c'est à dire ceux basés sur une seule "primitive".
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.
La primitive feOffset décale tout simplement la forme selon les valeurs des attributs dx et dy par rapport à sa position définies par les paramètres géométriques.
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.
Pour produire une ombre portée il faudrait donc jouer sur deux primitives : feOffset et feGaussianBlur.
Il faudrait donc créer un filtre composite appliquée à la forme grise.
Voir la solution en fin de chapitre.
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.
La primitive matrice de couleur permet de recalculer la valeur de chaque pixel de l’image (comme pour la matrice de convolution)
La nouvelle valeur du pixel est calculée par rapport aux quatre composantes: rouge, vert, bleu, canal alpha (transparence).
La primitive feColorMatrix a deux attributs type et values.
L'attribut type peut prendre les valeurs matrix, saturate, hueRotate, luminanceToAlpha.
Commençons par le type hueRotate car c'est le plus simple.
On définit différents filtres SVG de type hueRotate.
Notez que les valeurs de l'attribut values sont comprises entre 0 et 360 (degrés).
Il s’agit d’une rotation sur le cercle chromatique. Attention une rotation de 360° équivaut à une rotation de 0°.
Une rotation de 90 verdit l'image, une rotation de 180 bleuit la photo et une rotation de 270 rougit l'image.
Une rotation de 360 équivaut à une rotation de 0 et donc n'a indicidence sur l'image.
On applique ces différents filtres à chacune des insertions de la même image matricielle.
Un filtre de couleur avec l'attribut type valant saturate est aussi très simple.
On définit différents filtres de type saturate.
La saturation permet d’abaisser ou augmenter l’intensité des couleurs d’une image.
Si l'attribut type vaut saturate alors l'attribut values prend comme valeur un entier positif.
Si la valeur est 0 alors l'image est en nuances de gris et si la valeur est 1 alors l'image filtrée est identique à l'original.
Si la valeur est supérieure à 1 il y a saturation.
On applique ces différents filtres aux différentes insertions dans le canevas SVG de la même photo.
On arrive à des choses un peu plus compliquées car il faut créer une matrice 4 * 5 !
Trois filtres définis :
Les filtres de convolution permettent d’appliquer sur des images divers effets très utiles comme le floutage, l’embossage, la détection des contours ou le rehaussement des détails.
Une convolution est un traitement d'une matrice par une autre appelée matrice de convolution ou « noyau » (kernel).
Le filtre étudie successivement chacun des pixels de l'image. Pour chaque pixel appelé « pixel initial », il multiplie la valeur de ce pixel et de chacun des 8 pixels qui l'entourent par la valeur correspondante dans le noyau. Il additionne l'ensemble des résultats et le pixel initial prend alors la valeur du résultat final.
Le noyau (valeur de l'attribut kernelMatrix est une matrice de 3 par 3.
On définit cinq filtres dans le conteneur defs
Attention notez que pour ce dernier filtre, outre l'attribut kernelMatrix il y a l'attribut preserveAlpha avec la valeur true. Cela indique que le filtre de convolution ne s'applique pas à la couche Alpha (opacité)
On insère dans le canevas cinq fois la même image matricielle et pour chaque insertion on applique un des filtres.
On peut cumuler plusieurs filtres.
Il faut combiner les primitives feGaussianBlur & feOffset et appliquer ce filtre à une forme remplie de gris ayant les mêmes type, dimension et position que la forme principale.
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é à la forme grise qui est dessinée avant la forme rouge. Le couple de formes doit avoir le même type, même dimension et position.
Vous avez pu constaté dans ce chapitre que la définition des filtres peut être assez lourde ...
Si vous utilisez le framework JS pour SVG intitulé Snap SVG la définition devient très simple, aussi simple qu'en CSS 3.
Le problème est que ces définitions ne sont disponibles que dans le cadre du script ...
Les filtres avec Snap SVG
Si vous utilisez des éditeurs WYSIWYG de SVG tels Inkscape ou Boxy SVG, vous pouvez définir les filtres via ces interfaces
graphiques.
Chaque filtre défini sera identifié via un ID.
Inkscape et les filtres
Boxy SVG et les filtres
Les navigateurs autorisent désormais l'application de filtres CSS à des éléments SVG.
Or la définition des filtres en CSS est beaucoup plus simple qu'en SVG.
Il s'agit donc d'une remarquable avancée en matière de programmation web.
Ci-dessous trois éléments HTML et trois éléments SVG auxquels j'ai appliqué les mêmes filtres CSS.
La première image et le premier rectangle sont floutés.
La deuxième image et le deuxième rectangle sont ombrés.
La troisième image et le troisième rectangle sont floutés et ombrés.
.flou1 {filter : blur(6px);}
.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }
Les classes correspondent à des filtres définis avec la syntaxe CSS.
Le troisième filtre est composite : flou et ombrage.
On applique des filtres définis selon la syntaxe CSS à des éléments HTML puis à des éléments SVG via les mêmes classes CSS.
Un document SVG peut comporter une feuille de style avec la définition de filtres selon la syntaxe CSS.
Ces filtres peuvent s'appliquer aux objets SVG du dudit document.
Notez la feuille de style interne dans ce fichier d'extension .svg.
Cette feuille de style comprend trois filtres.
Le canevas proprement dit dessine trois rectangles avec coins arrondis.
Vous avez donc désormais le droit d'oublier tout ce que je viens de dire concernant la définition des filtres selon la
syntaxe SVG.
Les filtres avec CSS
Non, j'exagère car si vous utilisez des logiciels tels Inkscape ou Boxy SVG, les filtres seront alors définis selon la syntaxe SVG. Donc il est quand même utile de connaitre cette syntaxe.
Sachez par ailleurs qu'il y a réciprocité : un filtre défini en SVG peut s'appliquer aussi à un élément HTML.
Cette situation était fréquente par le passé puisque la norme CSS2 ignorait encore les filtres alors qu'ils existaient déjà
en SVG.
De façon plus générale de nombreuses définitions SVG (filtres & découpes) peuvent s'appliquer non seulement à des
objets SVG mais aussi à des 'tags' HTML.