Masques CSS SVG : garde la silhouette, choisis la couleur

Un masque CSS SVG contrôle quelles parties d’un élément restent visibles. Pour une icône monochrome, utilise la silhouette SVG comme masque et peins l’élément avec background-color: currentColor. La couleur visible de l’icône vient alors du CSS plutôt que de la palette originale du SVG.

Commence par la transparence de la source. Un rectangle opaque derrière l’illustration peut transformer l’icône souhaitée en bloc plein. Une ouverture transparente doit rester transparente si tu veux voir la page à travers.

La référence MDN de mask-image décrit comment l’image source et le mode de masque déterminent la visibilité. Le travail consiste à préparer une silhouette utile, choisir son interprétation et l’examiner à la taille utilisée dans ton interface.

Utilise un masque si tu souhaites une silhouette d’une seule couleur

Considère une icône de signet avec une ouverture en losange et une petite bande corail. Comme image SVG ordinaire, elle possède deux couleurs. Comme masque alpha sur un élément bleu, l’illustration opaque révèle le bleu ; la bande corail n’apparaît plus comme une couleur distincte.

C’est utile pour une icône d’interface adaptable au thème. Ce serait un mauvais choix de livraison pour une illustration dont les différences de couleur portent du sens.

Si tu dois modifier des remplissages et contours SVG individuels, utilise le guide de modification des couleurs SVG. Le masque est utile lorsque la silhouette elle-même est la partie réutilisable. Pour une limite géométrique nette, ajuste un découpage SVG personnalisé à sa cible et choisis entre étirement de la silhouette et préservation des proportions.

Prépare une petite source avec une vraie ouverture

Enregistre cet exemple original sous bookmark.svg :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

Le premier tracé contient l’extérieur du signet et son ouverture en losange. Il n’existe pas de rectangle de fond couvrant toute la surface. Le petit second rectangle est la bande corail.

Ouvre le SVG sur un fond contrasté avant de l’utiliser comme masque. Vérifie que tu peux voir à travers le losange et autour de la limite extérieure. Un losange blanc peint sur un signet plein semblerait similaire sur une page blanche, mais resterait opaque dans un masque alpha.

Pour une ressource existante, examine les formes de fond comme le motif visible. Le guide des fonds SVG transparents traite de la différence entre espace vide et rectangle blanc.

Peins l’élément icône avec CSS

Place icon.css à côté du SVG et utilise ces règles :

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

Utilise un libellé visible sur le bouton :

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

Ici, l’icône accompagne « Save article » : elle est donc cachée de l’arbre d’accessibilité au lieu de répéter ce libellé. L’exemple montre seulement la présentation ; connecte séparément le bouton à l’action d’enregistrement de ton application.

L’élément nécessite une boîte à peindre, d’où la largeur, la hauteur et le mode d’affichage définis en CSS. currentColor utilise sa couleur de texte. Changer color sur le bouton change la couleur de l’icône sans réécrire bookmark.svg.

La référence de mask-size définit contain comme l’ajustement de toute l’image du masque en conservant ses proportions. Avec le centrage et l’absence de répétition, la source occupe une boîte d’icône prévisible. Le guide des masques web.dev traite de ces contrôles de taille et de répétition.

Sers l’exemple en HTTP, même pour un test local. La description de mask-image sur MDN avertit que les sources d’image locales file:// ne sont pas acceptées pour cet usage. Une image de masque absente ou en échec peut rendre l’élément masqué invisible.

Distingue une image SVG d’un élément mask SVG

Un fichier SVG utilisé comme image et une référence à un élément SVG <mask> sont des entrées différentes. Ne choisis pas le mode seulement parce que le nom finit par .svg.

La référence de mask-mode précise ce comportement par défaut selon la source. En interprétation alpha, noir opaque et blanc opaque révèlent tous deux l’élément. En luminance, le blanc opaque le révèle et le noir le cache ; les valeurs intermédiaires peuvent produire une visibilité partielle.

mask-type s’applique à un élément SVG <mask> et vaut luminance par défaut, selon la référence de mask-type. L’ajouter au span de l’icône ordinaire ne change pas l’interprétation d’un masque d’image. Utilise mask-mode sur l’élément masqué pour préciser ce comportement.

L’exemple de signet utilise une image SVG externe ordinaire et choisit explicitement alpha. Teste les propriétés utilisées dans les navigateurs pris en charge ; la prise en charge générale des masques ne prouve pas celle de chaque combinaison de mode et de source.

Diagnostique un carré, une icône absente ou une ouverture remplie

Un test négatif utile consiste à placer un rectangle blanc opaque de pleine taille derrière une copie de bookmark.svg. Avec une interprétation alpha, cette copie révèle toute la zone du masque. Passer le rectangle du blanc au noir ne rétablit pas la silhouette car les deux couleurs restent opaques.

Retire le fond indésirable de la source au lieu d’ajuster la couleur de l’élément. Conserve le fichier original pour comparer la copie corrigée.

Distingue ces tests. Une requête d’image réussie ne prouve pas que la source possède la bonne transparence, et une transparence correcte ne fournit pas une largeur ou hauteur manquante à l’élément.

Juge le résultat à la taille du composant

Agrandis le signet pour examiner ses contours, puis remets-le à la taille réelle de l’interface. Vérifie l’ouverture en losange, l’encoche inférieure et l’espace entre l’icône et son libellé. La version agrandie aide à trouver les défauts ; la petite montre si le design est utile.

Essaie deux fonds de page contrastés et deux couleurs d’icône. L’ouverture doit afficher la couleur de page dans chaque cas. Si elle reste blanche, retourne à la structure source.

Pour une famille d’icônes, compare les symboles voisins à la même taille CSS. Leurs viewBox peuvent contenir des quantités différentes d’espace vide, donnant un aspect inégal à des boîtes identiques. Le guide de préparation des icônes pour kit d’interface traite de cette cohérence.

Reconstruis une silhouette matricielle uniquement si la source en a besoin

Un PNG transparent peut déjà servir de masque CSS ; la conversion SVG n’est pas nécessaire pour les masques. Conserve une source vectorielle propre existante si tu en possèdes une.

Si une icône utile ne subsiste que comme image matricielle grossière, le processus PNG vers SVG PerfectVector peut aider à préparer un candidat modifiable. Recadre sur le motif, examine l’aperçu vectoriel pour repérer les régions de fond et ouvertures perdues, puis télécharge le SVG. Utilise ce fichier dans le masque et répète les vérifications à la taille du composant.

Pour le signet, juge l’encoche extérieure et l’ouverture en losange avant de te soucier de la bande corail originale. La couleur uniforme du masque absorbera de toute façon celle de cette bande. Une illustration multicolore complexe peut nécessiter un autre traitement ; choisis délibérément la silhouette au lieu de vectoriser chaque détail.

La présentation de la vectorisation d’images explique plus largement la récupération source. Un fichier vectoriel nécessite encore une forme utile et une transparence adaptée à ce processus CSS.

FAQ

Un masque SVG conserve-t-il les couleurs originales ? Un masque contrôle la visibilité. Dans l’exemple au fond uniforme, l’élément fournit une seule couleur : les couleurs séparées de la source ne sont donc pas conservées.

Pourquoi mon icône devient-elle un carré plein ? Recherche un fond opaque de pleine taille dans la source du masque. En interprétation alpha, blanc opaque et noir opaque révèlent tous deux l’élément.

Les masques SVG sont-ils toujours des masques de luminance ? Non. Une image SVG ordinaire utilise normalement l’alpha avec match-source. Un élément mask SVG utilise la luminance par défaut sauf changement de son interprétation.

Dois-je convertir un PNG transparent en SVG ? Non. PNG peut fournir une image de masque. La vectorisation est facultative si tu dois reconstruire ou modifier une silhouette adaptée à partir d’une source matricielle.

Sources

1. MDN — mask-image — Sources d’image, échecs de chargement, nécessité d’un serveur local et visibilité.
2. MDN — mask-mode — Alpha, luminance et valeurs par défaut dépendant de la source.
3. MDN — mask-type — Interprétation d’un élément mask SVG.
4. MDN — mask-size — Dimensionnement contain et proportions d’image.
5. web.dev — appliquer des effets aux images avec CSS mask-image — Masques d’image, dimensionnement et répétition.

Commence par une icône et vérifie sa silhouette, son ouverture et sa taille finale dans l’interface. Si une source matricielle doit être reconstruite, prépare un candidat SVG, examine sa transparence et teste-le avec la couleur CSS utilisée par ton interface.