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
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.
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 est défini (dans la partie DEFS) grâce au conteneur filter avec l'attribut id pour identifier le filtre.
On applique un filtre à un objet SVG via l'attribut filter
Vous pouvez faire l'impasse sur ce chapitre si vous décidez d'utiliser la librairie Snap SVG pour définir les filtres.
Sachez cependant que les possibilités sont plus étendues avec SVG natif.
les filtres avec Snap SVG
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.
Le flou défini en SVG a été appliqué à un objet SVG mais aussi à un élément HTML (une image).
Maintenant le fait d'appliquer un filtre défini par SVG à un élément HTML est une technique obsolète car depuis la version 3 de CSS
on peut définir des filtres dans ce langage.
On peut appliquer un filtre SVG à un élément HTML mais l'inverse n'est pas vrai : les filtres CSS ne peuvent pas s'appliquer à des objets SVG pour le moment ... Quid de SVG version 2 ?
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.
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 plus loin.
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.
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).
Utilisez la librairie SnapSVG et plus précisément la propriété shadow
Les filtres avec Snap SVG