Je reprends l’écriture de ce tutoriel plusieurs années après l’avoir commencé. Les visionneurs SVG de référence sont maintenant Gecko (moteur de rendu de Firefox) et surtout Opera (qui gère même les animations !). Nous reprenons donc avec la technique du découpage (clip) et du masquage (mask). La technique du découpage permet de dire que l’on veut dessiner une forme SVG seulement dans un espace restreint, décrit par des formes SVG (formes de bases, chemins et même textes !). La technique du masquage est plus fine. On affiche une forme SVG selon la valeur de transparence du masque. Si le masque est opaque à un endroit donné, la forme sera affiché mais s’il est transparent, la forme ne sera pas affichée.
Le découpage permet de n’afficher du SVG uniquement s’il est situé dans la zone de découpage, qui est elle même un ensemble de formes SVG : formes de bases, tracés et texte.
Pour cela, on définit d’abord le découpage (dans defs évidemment) grâce à l’élément clipPath. On inclut dans cet élément (identifié par un… identifiant !) les différentes formes qui constituent notre découpe. Ensuite, on utilise la propriété CSS clip-path pour indiquer qu’on veut appliquer cette découpe sur une portion de dessin SVG.
Appliquons une découpe sur une image :
La découpe ne fonctionne pas uniquement sur les images : ça fonctionne sur toutes les formes SVG et même sur les groupes de formes (les fameux g).
On peut aussi animer les formes composant la découpe. Essayez, on peut faire plein de choses amusantes !
Le seul problème qu’on peut constater, c’est que la taille des formes de la découpe sont fixes. Il faut donc connaître la taille de la forme sur laquelle on veut appliquer la découpe avant de l’effectuer. Vous vous souvenez de objectBoundingBox ? Et bien cette valeur va encore nous servir ! Elle permet de spécifier, grâce à l’attribut clipPathUnits, que la découpe s’effectue par rapport à la plus grandes boîte englobant la cible de la découpe. On a donc une découpe qui s’adapte à la taille de sa cible et on doit par conséquent spécifier les coordonnées des formes en pourcentages.
Vous pouvez donc créer des cadres réutilisables, quelle que soit la taille de vos photos.
Les découpes fonctionnent de manière binaire : soit on affiche le point (s’il est dans la zone de découpe), sinon on ne l’affiche pas. Il existe un moyen plus fin qui se servent de l’opacité pour dessiner plus ou moins un dessin : les masques.
Une couleur CSS a quatre composantes : le rouge, le vert, le bleu et l’opacité (ou canal alpha). D’ou la notation RGBA : Red, Green, Blue, Alpha).
Les masques utilisent principalement le canal alpha pour déterminer comment est affiché un pixel, mais pas seulement. On doit commencer par remplir l’élément mask de formes (formes de base, tracés path et texte) : ces formes définiront notre masques. Seulement, on doit aussi spécifier des valeurs de couleur et d’opacité pour ces formes.
Il y a différentes manières de définir l’opacité d’un dessin :
Nous utiliserons les deux premières manières de décrire l’opacité, la troisième étant un masque spécifique.
Le principe est simple et très semblable aux découpes. Si à un endroit donné, le masque est opaque, alors le pixel en dessous est dessiné à l’identique. Si à un endroit donné, le masque est transparent (ou non opaque), le pixel en dessous n’est pas dessiné. C’est très semblable au découpage jusque là. Sauf que si à un endroit donné, le masque est transparent à 50%, alors le pixel en-dessous sera dessiné avec une opacité de 50%.
J’ai dit que les masques n’utilisaient pas seulement la composante alpha (bref, l’opacité) pour déterminer l’opacité général d’un point précis d’un masque. En fait, SVG utilise aussi les trois couleurs (rouge, vert, bleu), mais avec des coefficients différents puisque l’oeil ne voit pas la luminosité des ces trois couleurs de la même façon. Mais pour ne pas nous compliquer la vie, nous utiliserons du blanc et seulement du blanc.
Dans l’exemple suivant, on applique un masque composé de petits carrés sur une image. On fait décroître l’opacité des carrés (l’intérieur seulement, les bords restent opaques) et l’image va progressivement devenir opaque et sa couleur va se mélanger avec ce qu’il y a derrière. Et derrière, c’est plus blanc que blanc !
Mais le plus intéressant reste de combiner deux images en utilisant un dégradé. On utilise dans ce cas la propriété CSS stop-opacity pour définir l’opacité.
Nous allons utiliser une image d’immeubles et par dessus une image d’océan.
Bien sûr, comme pour les découpes, il existe un moyen de dire que l’on veut travailler dans la boîte englobant l’objet sur lequel on applique le masque. Vous me suivez ? En fait c’est simple. Si on place l’attribut maskContentUnits à la valeur objectBoundingBox (la valeur par défaut est userSpaceOnUse), alors les formes qui vont décrire notre masque auront des coordonnées exprimées en pourcentage de la boîte englobante (quand je parle de boîte englobante, il s’agit évidemment du plus petit rectangle contenant la forme sur laquelle on applique le masque). On peut donc reprendre notre exemple de tout à l’heure :
Nous avons fait le tour de ce sujet fascinant (si, si ) que sont les découpes et les masques. Ils vous seront très utiles alors mêmes s’il ne sont pas forcément facile à appréhender, ne les oubliez pas !
Maintenant, vous allez devoir vous accrochez. Nous allons entrer dans un chapitre qui est une spécificité de SVG, qui est long et encore plus difficile : les filtres !
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.
