Soglia alpha SVG: rendere netta la trasparenza

Per una soglia alpha a 0.5, usa feComponentTransfer con <feFuncA type="discrete" tableValues="0 1"/>. L'alpha in ingresso inferiore a 0.5 diventa trasparente; quello pari o superiore diventa opaco. Ometti le funzioni RGB quando vuoi che le loro mappature di trasferimento restino identità.

Questo filtro cambia l'alpha renderizzato, non la struttura della grafica sottostante. Non può rimuovere uno sfondo bianco opaco, perché i pixel bianchi con alpha 1 superano la stessa soglia dei pixel colorati opachi. Anche un PNG incorporato nell'SVG resta un'immagine raster.

Confronta pixel sorgente noti prima di scegliere la soglia

Abbiamo creato un piccolo PNG RGBA a 8 bit con una variazione graduale dell'alpha, un foro quadrato trasparente, una zona bianca opaca e sei campioni controllati. Ogni SVG di questo test incorpora gli stessi byte PNG in un unico elemento image. Le varianti senza filtro, discrete e table con interpolazione differiscono soltanto nella configurazione del filtro.

La scacchiera qui sotto appartiene alla pagina circostante, fuori dall'SVG. Rivela la trasparenza senza fingere di essere parte del canale alpha dell'immagine.

La nostra pagina ha caricato le varianti SVG reali, le ha disegnate su un canvas del browser e ha campionato l'interno dei sei campioni. I byte alpha in uscita erano:

I valori alpha normalizzati sono questi byte divisi per 255. Quindi 127/255 è leggermente inferiore a 0.5, mentre 128/255 è leggermente superiore. Questi campioni si trovano ai due lati della soglia matematica; un byte PNG a 8 bit non rappresenta esattamente 0.5.

Il foro sorgente aveva alpha 0 in ogni versione. La zona bianca aveva 255 in ogni versione. Sono osservazioni su questo campione controllato, non una garanzia che qualsiasi grafica conservi ogni dettaglio desiderato dopo l'applicazione della soglia.

Applica il trasferimento all'alpha

Il filtro essenziale è breve:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Applicalo all'immagine con filter="url(#alpha)". La regione del filtro di questo esempio copre l'intera sorgente e il viewport di 320 per 240. Usa limiti adatti alla tua grafica, anziché copiare quelle dimensioni in un file diverso.

La documentazione MDN di feFuncA lo identifica come funzione di trasferimento dell'alpha all'interno di feComponentTransfer. La documentazione di component-transfer descrive la rimappatura per canale e i calcoli su valori di colore non premoltiplicati.

L'attuale specifica Filter Effects assegna una mappatura identità alle funzioni di canale non specificate. Il nostro markup omette feFuncR, feFuncG e feFuncB; cambia soltanto la funzione di trasferimento dell'alpha. Questo non significa che i colori visibili su uno sfondo appaiano identici: cambiare l'alpha cambia il loro aspetto dopo la composizione.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

Il campione completo conserva i byte PNG. Il filtro non ricolora il file sorgente memorizzato e non lo sostituisce con tracciati. La diagnosi del raster incorporato spiega perché l'estensione esterna .svg non dimostra la presenza di geometria vettoriale.

Distingui un gradino da una tabella interpolata

Entrambi i tipi di trasferimento usano tableValues, ma interpretano le voci in modo diverso. La documentazione di type elenca le funzioni di trasferimento disponibili; la documentazione di tableValues descrive l'elenco dei valori di ricerca.

Per discrete, ogni voce occupa un intervallo di ingresso uguale. Con le due voci 0 1, il primo intervallo è 0 ≤ A < 0.5 e il secondo è 0.5 ≤ A ≤ 1. L'uscita salta tra i due valori.

Per table, le voci sono gli estremi di regioni di interpolazione lineare. Con 0 1, l'interpolazione rimappa ciascun alpha in ingresso su sé stesso. È un trasferimento identità, motivo per cui la colonna table campionata coincide con quella senza filtro.

Le formule degli intervalli della specifica spiegano anche queste alternative documentate:

La schermata verifica i casi discrete e table con due voci. Le righe con quattro voci descrivono le mappature della specifica; non sono ulteriori varianti grafiche misurate. Scegli type consapevolmente, senza supporre che un elenco contenente soltanto zeri e uni produca necessariamente una soglia binaria.

Tieni separati l'alpha in ingresso e l'opacità successiva

Fornisci al filtro l'alpha reale della sorgente. Nel nostro campione quell'alpha è memorizzato nei pixel PNG. Per un test vettoriale, usa l'alpha di un riempimento o fill-opacity prima di applicare il filtro.

Il modello di composizione Filter Effects applica i filtri prima dell'opacità. Un'opacità complessiva sull'elemento o su un gruppo circostante può quindi ridurre il risultato renderizzato dopo il filtro. Se applichi la soglia alla sorgente e poi componi il risultato con un'opacità inferiore, può apparire di nuovo traslucido. Escludi quell'opacità successiva da un test controllato della soglia.

Una soglia netta elimina anche la transizione semitrasparente della sorgente. I pixel deboli scompaiono e quelli traslucidi conservati diventano completamente opachi. Questo può eliminare un bagliore morbido o un bordo sottile che volevi mantenere. Esamina il risultato alle dimensioni di destinazione e su più sfondi. Un alpha binario in uscita non garantisce che il bordo finale visualizzato sia privo di effetti di campionamento o composizione.

Se la traslucenza fa parte del disegno, conservala o usa un trasferimento graduale anziché imporre una soglia. Per una maschera di visibilità volutamente monocromatica, la guida alle maschere CSS SVG descrive un diverso flusso di presentazione.

Il bianco opaco richiede una diagnosi diversa

La zona bianca resta perché il suo alpha è completamente opaco. Questa operazione seleziona in base all'alpha, non all'aspetto bianco di un pixel. I pixel di sfondo completamente opachi non diventano trasparenti con questa mappatura discrete 0 1.

Se il file contiene uno sfondo bianco indesiderato, verifica prima se è una forma SVG separata o parte di un'immagine raster. Elimina o modifica direttamente una forma di sfondo vettoriale indesiderata. Per un PNG con il bianco incorporato nei pixel, pulisci la sorgente raster prima del recupero oppure usa un procedimento adatto per rimuovere lo sfondo. La guida agli SVG con sfondo trasparente spiega questi casi.

Considera le parti realmente bianche del soggetto prima di rimuovere uno sfondo in base al colore. Questo filtro alpha non può dedurre quale zona bianca sia lo sfondo e quale appartenga alla grafica, né ripristinare informazioni di colore perse quando la sorgente è stata appiattita.

Prepara un raster trasparente prima del recupero vettoriale

PerfectVector può aiutarti quando il disegno finito esiste soltanto come raster e ti serve geometria SVG. Prepara prima un PNG con trasparenza reale, poi converti il PNG in SVG. Confronta l'anteprima su uno sfondo contrastante, esamina la sagoma e le aperture e controlla nel file scaricato eventuale geometria di sfondo indesiderata.

Il nostro esempio di filtro è un esperimento di visualizzazione. Non invia un SVG filtrato alla vettorializzazione e non dimostra un nuovo risultato di ricalco. Se vuoi conservare l'aspetto di un raster con soglia, prepara e verifica una vera copia raster da consegnare nel tuo editor prima di considerare il recupero vettoriale. Esamina l'alpha di quella copia anziché affidarti all'anteprima del browser.

Usa direttamente un originale vettoriale disponibile. Conserva la semitrasparenza quando trasmette informazioni utili nel disegno e ridisegna un simbolo semplice quando è più facile da mantenere. La panoramica sulla vettorializzazione delle immagini distingue la ricostruzione raster dal cambiamento della presentazione di un SVG esistente.

FAQ

Quale soglia alpha usa discrete con tableValues 0 1? L'alpha in ingresso inferiore a 0.5 viene mappato su 0; quello pari o superiore a 0.5 viene mappato su 1. Nei campioni PNG a 8 bit testati, il byte 127 diventa trasparente e il byte 128 diventa opaco.

Perché tableValues 0 1 lascia invariata la trasparenza? Con type table, quelle voci definiscono un'interpolazione lineare da 0 a 1, cioè l'identità. Usa type discrete per la mappatura a due gradini mostrata qui.

Questo elimina il bianco o trasforma un PNG in tracciati vettoriali? No. Il bianco completamente opaco supera questa soglia alpha. Le nostre varianti SVG contengono ancora lo stesso PNG in un unico elemento image e nessun tracciato; la pulizia dello sfondo e la ricostruzione vettoriale sono lavori separati.

Fonti

1. W3C — Filter Effects Level 1 — Definisce i valori identità predefiniti, il trasferimento dei canali non premoltiplicati e le formule degli intervalli table/discrete.
2. MDN — feComponentTransfer — Spiega la rimappatura dei canali eseguita dalla primitiva di filtro.
3. MDN — feFuncA — Identifica la funzione di trasferimento del canale alpha.
4. MDN — type — Elenca i tipi di funzione di trasferimento e il contesto dei relativi attributi.
5. MDN — tableValues — Descrive le voci usate dai trasferimenti table e discrete.

Ti serve geometria vettoriale da un disegno raster? Prepara e converti un PNG trasparente, poi esamina la sagoma e i fori nell'anteprima e verifica l'SVG scaricato su uno sfondo colorato.