Appliquer des masques SVG en CSS avec mask-image

Dans ce tutoriel, nous allons voir comment utiliser mask-image pour appliquer une forme SVG colorée autour d'un titre <h1>. Cette technique permet d'intégrer des icônes ou des éléments graphiques sans avoir à manipuler directement le SVG dans le HTML.

1. Explication de la technique

La propriété mask-image en CSS permet de définir une zone visible d'un élément en fonction d'une image. Ici, nous utilisons un fichier SVG comme masque et appliquons une couleur avec background-color. Cela permet d’obtenir une icône colorée sans modifier directement le SVG.

L'objectif est d'afficher un titre <h1> avec un SVG coloré placé à gauche et à droite.

2. Le code LESS

Voici le code LESS permettant de styliser notre <h1> avec des icônes SVG masquées :

h1 {
    display: flex;
    align-items: center;

    &:before,
    &:after {
        content: "";
        height: 40px;
        width: 40px;
        background-color: #FFA500;
        mask-image: url('/mysvg.svg');
        mask-size: 40px 40px;
        mask-repeat: no-repeat;
    }

    &:before {
        margin-right: .5rem;
    }

    &:after {
        margin-left: .5rem;
    }
}

Version CSS

h1 {
    display: flex;
    align-items: center;
}

h1::before,
h1::after {
    content: "";
    height: 40px;
    width: 40px;
    background-color: #FFA500;
    mask-image: url('/mysvg.svg');
    -webkit-mask-image: url('/mysvg.svg'); /* Compatibilité Safari */
    mask-size: 40px 40px;
    mask-repeat: no-repeat;
}

h1::before {
    margin-right: .5rem;
}

h1::after {
    margin-left: .5rem;
}

Différences entre LESS et CSS :

• En LESS, on utilise &:before et &:after, alors qu'en CSS, il faut écrire h1::before et h1::after en entier.
• LESS permet d'imbriquer les styles, tandis qu'en CSS pur, chaque règle doit être déclarée séparément.
• J’ai ajouté -webkit-mask-image pour assurer la compatibilité avec Safari.

3. Explication du code

• display: flex; align-items: center; : Centre verticalement le texte et les icônes.
• &:before et &:after : Ajoutent les icônes SVG avant et après le titre.
• content: ""; : Nécessaire pour que les pseudo-éléments s'affichent.
• height et width : Définit la taille de l’icône.
• background-color: #FFA500; : Applique la couleur d'affichage.
• mask-image: url('/mysvg.svg'); : Utilise le SVG comme masque.
• mask-size: 40px 40px; mask-repeat: no-repeat; : Ajuste la taille et empêche la répétition.

4. Résultat et compatibilité

Avec ce code, le titre <h1> est encadré par deux icônes SVG colorées. L'utilisation de mask-image permet une personnalisation facile des couleurs via background-color.

Compatibilité navigateur :

• mask-image est bien pris en charge par Chrome, Edge et Safari.
• Pour Firefox, utilisez -webkit-mask-image en complément :

mask-image: url('/mysvg.svg');
-webkit-mask-image: url('/mysvg.svg');

5. Améliorations possibles

• Modifier la couleur avec background-color pour s'adapter au design du site.
• Utiliser un autre SVG pour personnaliser les icônes.
• Ajouter une animation au hover avec transition pour un effet dynamique.

6. Variante : Icône SVG à gauche et ligne à droite

Dans cette version alternative, nous utilisons toujours mask-image pour afficher une icône SVG à gauche du titre <h1>, mais nous ajoutons également une ligne à droite pour un effet visuel plus structuré.

h1 {
    display: flex;
    align-items: center;

    &:before {
        margin-right: .5rem;
        content: "";
        height: 40px;
        width: 40px;
        background-color: #FFA500;
        mask-image: url('/mysvg.svg');
        mask-size: 40px 40px;
        mask-repeat: no-repeat;
    }

    &:after {
        margin-left: 20px;
        flex: 1;
        content: "";
        height: 1px;
        background-color: #FFA500;
    }
}

Explication du code :

• Icône SVG à gauche (&:before) : Identique à la première version, il affiche un SVG coloré.
• Ligne à droite (&:after) :
  • margin-left: 20px; : Espacement entre le titre et la ligne.
  • flex: 1; : Permet d’étirer la ligne pour s’adapter à l’espace disponible.
  • height: 1px; background-color: #FFA500; : Création d’une ligne fine de couleur orange.