Maschere CSS SVG: conserva la sagoma, scegli il colore

Una maschera CSS SVG controlla quali parti di un elemento restano visibili. Per un'icona monocolore, usa la sagoma dell'SVG come maschera e colora l'elemento con background-color: currentColor. L'icona prende così il colore visibile dal CSS anziché mostrare la tavolozza originale dell'SVG.

Parti dalla trasparenza della sorgente. Un rettangolo opaco dietro la grafica può trasformare l'icona prevista in un blocco pieno. Un'apertura trasparente deve restare trasparente se vuoi che la pagina sottostante si veda attraverso di essa.

Il riferimento MDN a mask-image descrive come l'immagine sorgente e la modalità di mascheratura determinano la visibilità. Il lavoro pratico consiste nel preparare una sagoma utile, sceglierne l'interpretazione ed esaminarla alla dimensione usata dall'interfaccia.

Usa una maschera quando vuoi una sola sagoma colorata

Considera un'icona di segnalibro con un'apertura a rombo e una piccola striscia corallo. Come normale immagine SVG ha due colori. Come maschera alfa sopra un elemento blu, la grafica opaca rivela il blu; la striscia corallo non appare più come colore separato.

È utile per un'icona d'interfaccia adattabile al tema. Sarebbe una scelta di consegna poco adatta per un'illustrazione le cui differenze di colore hanno un significato.

Se devi modificare singoli riempimenti e tratti SVG, usa la guida alla modifica dei colori SVG. La mascheratura è utile quando la sagoma stessa è la parte riutilizzabile. Per un bordo geometrico netto, adatta un ritaglio SVG personalizzato alla destinazione e scegli fra allungare la sagoma e conservarne le proporzioni.

Prepara una piccola sorgente con un'apertura reale

Salva questo esempio originale come 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>

Il primo tracciato contiene il bordo esterno del segnalibro e l'apertura a rombo. Non c'è un rettangolo di sfondo che copre tutta l'area. Il piccolo secondo rettangolo è la striscia corallo.

Apri l'SVG su uno sfondo contrastante prima di usarlo come maschera. Verifica che si veda attraverso il rombo e attorno al bordo esterno. Un rombo bianco disegnato sopra un segnalibro pieno apparirebbe simile su una pagina bianca, ma resterebbe opaco in una maschera alfa.

Per una risorsa esistente, controlla eventuali forme di sfondo oltre al motivo visibile. La guida allo sfondo SVG trasparente tratta la differenza fra spazio vuoto e rettangolo bianco.

Colora l'elemento icona con CSS

Metti icon.css accanto all'SVG e usa queste regole:

.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;
}

Usa un'etichetta visibile sul pulsante:

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

Qui l'icona accompagna “Save article”, quindi è nascosta dall'albero di accessibilità invece di ripetere quell'etichetta. L'esempio mostra soltanto la presentazione; collega separatamente il pulsante all'azione di salvataggio dell'applicazione.

L'elemento richiede un riquadro da colorare, perciò il CSS imposta larghezza, altezza e display. currentColor usa il suo colore del testo. Cambiare il color del pulsante cambia la colorazione dell'icona senza riscrivere bookmark.svg.

Il riferimento a mask-size definisce contain come adattamento dell'intera immagine di maschera mantenendone le proporzioni. Insieme al centraggio e all'assenza di ripetizione, fa occupare alla sorgente un unico riquadro d'icona prevedibile. La guida web.dev alla mascheratura tratta questi controlli di dimensione e ripetizione.

Servi l'esempio tramite HTTP, anche durante i test locali. La descrizione MDN di mask-image avverte che le sorgenti di immagini locali file:// non sono accettate per questo uso. Un'immagine di maschera mancante o non caricata può lasciare invisibile l'elemento mascherato.

Distingui un'immagine SVG da un elemento mask SVG

Un file SVG usato come immagine e un riferimento a un elemento SVG <mask> sono input diversi. Non scegliere la modalità soltanto perché il nome del file termina con .svg.

Il riferimento a mask-mode specifica questo valore predefinito dipendente dalla sorgente. Nell'interpretazione alfa, nero opaco e bianco opaco rivelano entrambi l'elemento. Nell'interpretazione di luminanza, il bianco opaco lo rivela e il nero lo nasconde; valori intermedi possono produrre visibilità parziale.

mask-type si applica a un elemento SVG <mask> e ha come valore predefinito luminance, secondo il riferimento a mask-type. Aggiungerlo al normale span dell'icona non cambia l'interpretazione di una maschera immagine. Usa mask-mode sull'elemento mascherato quando devi specificare quel comportamento.

L'esempio del segnalibro usa una normale immagine SVG esterna e sceglie esplicitamente alfa. Verifica le proprietà usate nei browser supportati; il supporto della funzionalità di mascheratura generale non dimostra il supporto di ogni combinazione di modalità e sorgente.

Diagnostica un quadrato, un'icona mancante o un'apertura piena

Un test negativo utile consiste nel mettere un rettangolo bianco opaco che copre tutta l'area dietro una copia di bookmark.svg. Con l'interpretazione alfa, quella copia rivela l'intera area della maschera. Cambiare il rettangolo da bianco a nero non ripristina la sagoma perché entrambi i colori restano opachi.

Rimuovi lo sfondo indesiderato dalla sorgente invece di regolare il colore dell'elemento. Conserva il file originale per confrontarlo con la copia corretta.

Mantieni separati questi test. Una richiesta dell'immagine riuscita non dimostra che la sorgente abbia la trasparenza corretta e una trasparenza corretta non fornisce a un elemento una larghezza o altezza mancante.

Giudica il risultato alla dimensione del componente

Ingrandisci il segnalibro per controllarne i contorni, poi riportalo alla dimensione effettiva dell'interfaccia. Verifica l'apertura a rombo, l'incavo inferiore e lo spazio fra icona ed etichetta. La versione ingrandita aiuta a trovare difetti; quella piccola dice se il disegno è utile.

Prova due sfondi di pagina contrastanti e due colori dell'icona. L'apertura dovrebbe mostrare il colore della pagina in ogni caso. Se resta bianca, torna alla struttura della sorgente.

Per una famiglia di icone, confronta simboli vicini alla stessa dimensione CSS. I loro viewBox possono contenere quantità diverse di spazio vuoto, facendo apparire irregolari riquadri uguali. La guida alla preparazione delle icone per kit UI tratta questo lavoro di coerenza.

Ricostruisci una sagoma raster soltanto quando la sorgente lo richiede

Un PNG trasparente può già essere una maschera CSS; la conversione SVG non è un requisito della mascheratura. Conserva una sorgente vettoriale pulita esistente quando la hai.

Se un'icona utile sopravvive soltanto come immagine raster approssimativa, il flusso PNG-SVG di PerfectVector può aiutare a preparare un candidato modificabile. Ritaglia sul motivo, controlla nell'anteprima vettoriale regioni di sfondo e aperture perse, poi scarica l'SVG. Usa quel file nella maschera e ripeti i controlli alla dimensione del componente.

Per il segnalibro, giudica l'incavo esterno e l'apertura a rombo prima di preoccuparti della striscia corallo originale. La colorazione uniforme della maschera assorbirà comunque il colore della striscia. Un'illustrazione multicolore complicata può richiedere un trattamento diverso; scegli deliberatamente la sagoma invece di ricalcare ogni dettaglio.

La panoramica sulla vettorializzazione delle immagini spiega più ampiamente la ricostruzione della sorgente. Un file vettoriale richiede comunque una forma utile e una trasparenza adeguata per questo flusso CSS.

FAQ

Una maschera SVG conserva i colori originali? Una maschera controlla la visibilità. Nell'esempio con sfondo uniforme, l'elemento fornisce un colore, quindi i colori separati della sorgente non vengono conservati.

Perché la mia icona diventa un quadrato pieno? Cerca uno sfondo opaco che copre tutta l'area nella sorgente della maschera. Nell'interpretazione alfa, bianco e nero opachi rivelano entrambi l'elemento.

Le maschere SVG sono sempre maschere di luminanza? No. Una normale immagine SVG usa di solito alfa con match-source. Un elemento mask SVG usa luminanza per impostazione predefinita, salvo modifica della sua interpretazione.

Devo convertire un PNG trasparente in SVG? No. PNG può fornire un'immagine di maschera. La vettorializzazione è facoltativa quando devi ricostruire o modificare una sagoma adatta da una sorgente raster.

Fonti

1. MDN — mask-image — Sorgenti immagine, caricamento fallito, requisiti del server locale e visibilità.
2. MDN — mask-mode — Alfa, luminanza e valori predefiniti dipendenti dalla sorgente.
3. MDN — mask-type — Interpretazione di un elemento mask SVG.
4. MDN — mask-size — Dimensionamento contain e proporzioni dell'immagine.
5. web.dev — Applicare effetti alle immagini con CSS mask-image — Maschere immagine, dimensionamento e ripetizione.

Parti da un'icona e verifica sagoma, apertura e dimensione finale nell'interfaccia. Se devi ricostruire una sorgente raster, prepara un candidato SVG, controlla la trasparenza e verificalo con la colorazione CSS che userà l'interfaccia.