SVG clipPath o mask: bordi netti o sfumati

Usa un <clipPath> SVG quando vuoi che un'immagine si interrompa su un contorno definito. Usa una <mask> SVG quando l'immagine deve sfumare attraverso una trasparenza parziale. Una maschera può anche creare un taglio netto, ma un tracciato di ritaglio esprime l'intento più semplice per un bordo geometrico netto. La specifica CSS Masking li definisce come operazioni distinte sulla visibilità.

La scelta conta quando un'immagine a forma di logo deve entrare in un altro editor. Entrambi i metodi controllano ciò che vedi; nessuno dei due trasforma i pixel nascosti in geometria eliminata né converte l'immagine in tracciati vettoriali. Questa guida usa una scena raster originale e un contorno, poi cambia soltanto la regola di visibilità. Puoi applicare la stessa prova alla tua grafica prima dell'esportazione.

Scegli in base al bordo necessario

Il bordo visibile di un ritaglio può comunque avere il normale antialiasing del rendering. Ciò che non può esprimere è una fascia deliberata di visibilità parziale prodotta da un gradiente di grigi o opacità all'interno della forma ritagliata. Il tutorial MDN su ritaglio e mascheratura chiarisce la distinzione con piccoli esempi SVG.

Confronta un'immagine con tre regole di visibilità

Per questa prova, ho disegnato un piccolo paesaggio, l'ho rasterizzato in un PNG di 400 × 240 e ho collocato gli stessi pixel sotto lo stesso contorno simile a una foglia in ogni pannello. Il pannello sinistro ritaglia su quel contorno. Quello centrale usa una maschera di luminanza dal bianco al nero; quello destro una maschera alfa da opaca a trasparente. Entrambi i gradienti sono stati scelti per creare la stessa sfumatura da sinistra a destra. Ogni risultato appare su sfondi chiari e scuri, rendendo più facile valutare il bordo che scompare.

Le due colonne delle maschere appaiono simili per un motivo: il gradiente di luminanza dal bianco al nero e il gradiente di opacità del bianco codificano valori di maschera confrontabili. Non sono input intercambiabili. Il nero opaco nasconde con la mascheratura di luminanza, mentre rimane visibile con la mascheratura alfa. In modalità alfa, il risultato dipende dall'opacità del pixel, non dal suo colore nero o bianco. La definizione di elaborazione delle maschere CSS Masking specifica entrambi i calcoli.

Costruisci ritaglio e maschera dallo stesso contorno

Salva il codice seguente come clip-or-mask.svg, metti la tua photo.png accanto ad esso e servi entrambi i file dalla stessa cartella tramite HTTP. Le due immagini usano un unico sistema di coordinate 400 × 240. Differiscono soltanto per clip-path rispetto a 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>

Gli ID dei riferimenti devono essere univoci all'interno dell'SVG. Sia il ritaglio sia la maschera usano userSpaceOnUse affinché le coordinate del motivo coincidano con l'area locale 400 × 240 di ciascuna immagine. Il riferimento MDN su <clipPath> descrive il ritaglio come una limitazione del disegno senza cambiamento della geometria intrinseca dell'oggetto. Il riferimento MDN su <mask> distingue maskUnits, che posiziona la regione della maschera, da maskContentUnits, che posiziona la sua grafica.

Per provare invece la luminanza, duplica la maschera con un ID diverso, imposta mask-type="luminance" e cambia i punti del gradiente in bianco opaco all'inizio e nero opaco alla fine. Mantieni il riferimento mask sincronizzato con il nuovo ID. Per impostazione predefinita, una <mask> SVG usa la luminanza; questo esempio nomina la modalità affinché una modifica futura non cambi silenziosamente il significato del nero. Consulta il riferimento MDN su mask-type.

Controlla il risultato prima di esportare

1. Renderizza l'SVG sia su uno sfondo chiaro sia su uno scuro. Una sfumatura che sembra invisibile sul bianco può essere evidente sullo scuro.
2. Conferma che immagine e motivo usino le stesse coordinate. Se ridimensioni soltanto l'immagine, il contorno potrebbe non coincidere più. Per ritagli riutilizzabili su oggetti di dimensioni diverse, la guida alle unità clipPath spiega le scelte di coordinate.
3. Se un bordo sfumato termina bruscamente, ispeziona x, y, width e height della maschera oltre al gradiente. La regione della maschera può tagliare la grafica fuori dai suoi limiti; allargare soltanto il gradiente non correggerà una regione troppo stretta. MDN elenca i valori predefiniti della regione della maschera, ma limiti espliciti sono più facili da esaminare in un file da consegnare.
4. Riapri l'SVG salvato nell'applicazione che lo userà. Un rendering corretto nel browser non dimostra che un altro importatore mantenga il ritaglio, la maschera, l'immagine collegata o la modificabilità necessaria.
5. Ispeziona la struttura del file. Se contiene ancora <image>, contiene ancora pixel raster, anche se il contorno di ritaglio è vettoriale. Il controllo dei raster incorporati mostra come riconoscere questa distinzione.

L'immagine di questo esempio rimane un PNG. Ritaglio e mascheratura non la ricalcano. Se il lavoro richiede geometria reale da taglio o un foro trasparente permanente, crea i tracciati corrispondenti nell'editor e ispeziona l'esportazione. La guida alla risoluzione dei fori riempiti aiuta a distinguere un'apertura reale da una zona bianca che sembra vuota soltanto su una tela bianca.

Dove si inserisce PerfectVector

Se il contorno necessario esiste ormai soltanto in un logo PNG o JPG, la procedura da immagine a vettore di PerfectVector può fornirti un candidato SVG modificabile. Ispeziona il tracciato esterno, i piccoli spazi e le eventuali forme di sfondo indesiderate prima di copiare un contorno in un <clipPath> o una <mask>. Devi comunque scegliere il metodo di visibilità e costruire l'effetto in un editor SVG. Mantieni un originale vettoriale pulito esistente quando è disponibile.

Non devi vettorializzare una fotografia soltanto per collocarla dietro una maschera. Lascia i pixel fotografici come immagine quando conservarne i dettagli è importante. Per un'icona monocromatica controllata dal CSS, anziché un'immagine dentro SVG, la guida alle maschere CSS SVG tratta quella procedura separata.

FAQ

Un clipPath SVG può creare una sfumatura graduale? No. Un tracciato di ritaglio definisce quali parti dell'oggetto sono visibili, a parte il normale antialiasing sul bordo. Usa una maschera con valori intermedi di opacità o luminanza per una sfumatura deliberata.

Il nero nasconde un'immagine in ogni maschera SVG? No. Il nero opaco nasconde con la mascheratura di luminanza, ma rivela con la mascheratura alfa perché il pixel è ancora opaco. La grafica completamente trasparente nasconde in entrambe le modalità.

Ritaglio o mascheratura trasformano un PNG in grafica vettoriale? No. Entrambi cambiano la visibilità al momento del rendering. Un SVG può ancora contenere un <image> raster e potrebbe richiedere ricalco o modifica dei tracciati separati per una consegna esclusivamente vettoriale.

Fonti

1. W3C — Modulo CSS Masking livello 1 — Definizioni di ritaglio, mascheratura e valori delle maschere alfa rispetto alla luminanza.
2. MDN — Ritaglio e mascheratura — Esempi di ritaglio netto e maschere sfumate.
3. MDN — <clipPath> — Comportamento del ritaglio, scelta delle coordinate e geometria sottostante invariata.
4. MDN — <mask> — Regione della maschera, sistema di coordinate del contenuto e comportamento dei riferimenti.
5. MDN — mask-type — Interpretazione alfa e di luminanza della grafica delle maschere SVG.

Se un logo raster richiede prima contorni modificabili, crea un candidato SVG con PerfectVector, ispeziona il tracciato recuperato, poi applica un ritaglio o una maschera e riapri il file esportato nella destinazione.