SVG clipPath ou mask : contours nets ou fondus doux

Utilise un <clipPath> SVG lorsque tu veux qu’une image s’arrête à un contour défini. Utilise un <mask> SVG lorsque l’image doit s’estomper par transparence partielle. Un masque peut aussi produire une découpe nette, mais un tracé de rognage exprime plus simplement l’intention d’un bord géométrique net. La spécification CSS Masking les définit comme des opérations de visibilité distinctes.

Le choix compte lorsqu’une image en forme de logo doit aller dans un autre éditeur. Les deux méthodes contrôlent ce que tu vois ; aucune ne transforme les pixels masqués en géométrie supprimée ni ne convertit l’image en tracés vectoriels. Ce guide utilise une scène matricielle originale et un contour, puis change uniquement la règle de visibilité. Tu peux appliquer le même test à ton dessin avant l’export.

Choisir selon le bord souhaité

Le bord visible d’un rognage peut toujours avoir l’anticrénelage normal du rendu. Ce qu’il ne peut pas exprimer, c’est une bande volontaire de visibilité partielle issue d’un dégradé de gris ou d’opacité dans la forme rognée. Le tutoriel MDN de rognage et masquage montre cette distinction avec de petits exemples SVG.

Comparer une image sous trois règles de visibilité

Pour ce test, j’ai dessiné un petit paysage, l’ai pixellisé en PNG de 400 × 240 et ai placé les mêmes pixels sous le même contour en forme de feuille dans chaque panneau. Le panneau gauche rogne à ce contour. Celui du milieu utilise un masque de luminance blanc vers noir ; celui de droite utilise un masque alpha opaque vers transparent. Les deux dégradés ont été choisis pour créer le même fondu de gauche à droite. Chaque résultat apparaît sur fonds clairs et sombres, ce qui facilite l’évaluation du bord qui disparaît.

Les deux colonnes de masques se ressemblent ici pour une raison : le dégradé de luminance blanc vers noir et le dégradé d’opacité du blanc encodent des valeurs de masque comparables. Leurs entrées ne sont pas interchangeables. Le noir opaque masque en mode luminance, tandis qu’il garde l’image visible en mode alpha. En mode alpha, c’est l’opacité du pixel qui détermine le résultat ; sa couleur noire ou blanche n’intervient pas. La définition du traitement des masques CSS Masking précise les deux calculs.

Construire rognage et masque à partir d’un seul contour

Enregistre ce qui suit sous clip-or-mask.svg, place ton propre photo.png à côté et sers les deux fichiers depuis le même dossier en HTTP. Les deux images utilisent un seul système de coordonnées de 400 × 240. Elles diffèrent uniquement par clip-path ou mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Les identifiants référencés doivent être uniques dans le SVG. Le rognage et le masque utilisent tous deux userSpaceOnUse pour aligner les coordonnées du motif sur la zone locale de 400 × 240 de chaque image. La référence MDN de <clipPath> décrit le rognage comme une restriction du rendu sans changement de la géométrie propre de la cible. La référence MDN de <mask> distingue maskUnits, qui positionne la zone du masque, de maskContentUnits, qui positionne son dessin.

Pour essayer la luminance, duplique le masque avec un autre identifiant, définis mask-type="luminance" et change les points du dégradé pour utiliser du blanc opaque au début et du noir opaque à la fin. Garde la référence mask synchronisée avec ce nouvel identifiant. Par défaut, un <mask> SVG utilise la luminance ; cet exemple nomme le mode pour qu’une modification ultérieure ne change pas silencieusement le sens du noir. Consulte la référence MDN de mask-type.

Vérifier le résultat avant l’export

1. Rends le SVG sur un fond pâle et un fond sombre. Un fondu qui semble invisible sur blanc peut être évident sur sombre.
2. Confirme que l’image et le motif utilisent les mêmes coordonnées. Si tu redimensionnes seulement l’image, le contour peut ne plus s’aligner. Pour des rognages réutilisables sur des cibles de tailles différentes, le guide des unités clipPath explique les choix de coordonnées.
3. Si un bord doux se termine brusquement, examine les x, y, width et height du masque ainsi que le dégradé. La zone du masque peut couper le dessin hors de ses limites ; élargir seulement le dégradé ne corrigera pas une zone étroite. MDN présente les valeurs par défaut de la zone du masque, mais des limites explicites sont plus faciles à vérifier dans un livrable.
4. Rouvre le SVG enregistré dans l’application qui l’utilisera. Un rendu correct dans le navigateur n’établit pas qu’un autre importateur conserve le rognage, le masque, l’image liée ou l’éditabilité souhaités.
5. Examine la structure du fichier. S’il contient encore <image>, il contient toujours des pixels matriciels, même si le contour de rognage est vectoriel. La vérification des images matricielles intégrées montre comment repérer cette distinction.

L’image de cet exemple reste un PNG. Le rognage et le masquage ne la vectorisent pas. Si ton travail exige une vraie géométrie de découpe ou un trou transparent permanent, crée les tracés correspondants dans ton éditeur et examine l’export. Le guide de dépannage des trous remplis aide à distinguer une vraie ouverture d’une tache blanche qui semble seulement vide sur un canevas blanc.

La place de PerfectVector

Si le contour nécessaire n’existe plus que dans un logo PNG ou JPG, la procédure image vers vecteur de PerfectVector peut te donner un SVG candidat éditable. Examine son tracé extérieur, ses petits espaces et les éventuelles formes de fond indésirables avant de copier un contour dans un <clipPath> ou <mask>. Tu choisis toujours la méthode de visibilité et construis l’effet dans un éditeur SVG. Garde un original vectoriel propre existant lorsqu’il est disponible.

Tu n’as pas besoin de vectoriser une photographie simplement pour la placer derrière un masque. Garde les pixels photographiques comme image lorsque leurs détails comptent. Pour une icône monochrome contrôlée par CSS plutôt qu’une image dans un SVG, le guide des masques CSS SVG traite de cette procédure distincte.

FAQ

Un clipPath SVG peut-il créer un fondu progressif ? Non. Un tracé de rognage définit les parties visibles de la cible, hormis l’anticrénelage ordinaire à sa limite. Utilise un masque avec des valeurs intermédiaires d’opacité ou de luminance pour un fondu volontaire.

Le noir masque-t-il une image dans tous les masques SVG ? Non. Le noir opaque masque en mode luminance, mais révèle en mode alpha, car le pixel reste opaque. Un dessin entièrement transparent masque dans les deux modes.

Le rognage ou masquage transforme-t-il un PNG en dessin vectoriel ? Non. Les deux changent la visibilité au rendu. Un SVG peut toujours contenir une <image> matricielle et nécessiter une vectorisation distincte ou une édition des tracés pour un livrable uniquement vectoriel.

Sources

1. W3C — CSS Masking Module Level 1 — Définitions du rognage, du masquage et des valeurs de masque alpha ou luminance.
2. MDN — Rognage et masquage — Exemples de rognage net et de masque doux.
3. MDN — <clipPath> — Comportement du rognage, choix de coordonnées et géométrie sous-jacente inchangée.
4. MDN — <mask> — Zone du masque, système de coordonnées du contenu et fonctionnement des références.
5. MDN — mask-type — Interprétation alpha ou luminance du dessin d’un masque SVG.

Si un logo matriciel a d’abord besoin de contours éditables, crée un SVG candidat avec PerfectVector, examine le tracé reconstruit, puis applique un rognage ou un masque et rouvre le fichier exporté dans sa destination.