SVG : les outils masque et découpe

L'outil masque

Image bénéficiant d'un masque

On peut souhaiter appliquer au dessin le même effet que si il était vu au travers d'un rideau translucide. Il faut alors utiliser la fonction masque.

Le code SVG correspondant

<svg width="50%" height="50%" style ="border : none" viewBox ="0 0 500 600"> <defs> <!-- on définit un rectange de 250px par 300px qu’on réutilisera dans notre masque --> <rect id="rect" width="250" height="300" fill = 'white'/> <!-- définition du masque --> <mask id="masque"> <use xlink:href="#rect" transform="translate(0,0)" fill-opacity="1"/> <use xlink:href="#rect" transform="translate(250,0)" fill-opacity="0.75"/> <use xlink:href="#rect" transform="translate(0,300)" fill-opacity="0.50"/> <use xlink:href="#rect" transform="translate(250,300)" fill-opacity="0"/> </mask> </defs> <image xlink:href="../images/jolie_fille.jpg" width="500" height="600" mask = 'url(#masque)'/> </svg>

Commentaire du code

Le principe du masque est simple.
Si à un endroit donné le masque est opaque alors l'objet sous le masque sera opaque (donc visible) !
Si à un endroit donné le masque est transparent alors l'objet sous le masque sera transparent (donc invisible) !
Donc si à un endroit donné, le masque est opaque à 50% alors l'objet sous le masque aura une opacité de 50% !

Ici on définit avec la balise mask un masque de 500 par 600 qui comprend 4 rectangles de 250 par 300 avec une opacité décroissante.
Ce masque s'applique à une image de 500 par 600 grâce à l'attribut mask.
Donc dans le rectangle en haut à gauche la fraction de l'image qui apparaît est très opaque alors que dans le rectangle en bas à droite la portion de l'image est invisible.

Découpe d'une image en SVG

Image bénéficiant d'une découpe

On peut souhaiter l'effet d'un objet vu à travers un trou de serrure ou une paire de jumelles. Il faut alors utiliser la fonction découpe. Utilisation d’une découpe grâce à l’élément clipPath

Le code SVG correspondant

<svg width="50%" height="50%" style ="border : none" viewBox="0 0 400 300"> <title>Utilisation d’une découpe grâce à l’élément clipPath</title> <defs> <!-- définition de la découpe --> <clipPath id="decoupe"> <ellipse cx="50%" cy="50%" rx="200" ry = "150" /> </clipPath> </defs> <image xlink:href="../images/chalets.jpg" width="400" height="300" clip-path = 'url(#decoupe)'/> </svg>

Commentaire du code

Grâce au conteneur clipPath on définit ici une découpe simple : une ellipse.
Puis on affiche une image avec cette découpe en utilisant l'attribut clip-path à la balise image

Découpe : autre exemple

Jolie fille vue au travers d'un trou de serrure

La découpe peut être un groupe de formes.
Ci-dessous la découpe est un cercle et un triangle pour créer un trou de serrure.

Ici il s'agit de l'incorporation dans la page d'un fichier SVG (decoupe.svg)

Le code pour l'insertion de l'image SVG dans la page :

<object type="image/svg+xml" data="decoupe.svg" width ="50%"></object>

Il faut incorporer l'image vectorielle avec la balise object car le code SVG dans ce fichier contient des liens vers d'autres images.

Le fichier "decoupe.svg"

Quant au code du fichier SVG, il est le suivant :

<?xml version="1.0" encoding="utf-8"?> <svg width="100%" height="100%" viewBox ="0 0 500 600" ... <defs> <clipPath id="trou_serrure"> <circle cx="50%" cy="200" r="150" /> <polygon points ="250,200 150,500 350,500" /> </clipPath> </defs> <image xlink:href="../images/jolie_fille.jpg" width="500" height="600" clip-path = "url(#trou_serrure)" /> </svg>
Retour menu