Grana SVG: mantieni il rumore dentro la grafica

Per aggiungere grana a un’illustrazione SVG, genera rumore con feTurbulence, trasformalo in una tenue sovrapposizione monocromatica e componila dentro SourceAlpha. Uniscila sopra SourceGraphic affinché il riempimento originale rimanga visibile. Questo aggiunge una texture renderizzata lasciando intatta la geometria dei tracciati.

Una sola primitiva di rumore dà un risultato diverso: riempie la propria sottoregione del filtro anziché seguire il contorno della forma. Ecco perché una foglia può diventare una chiazza rettangolare di rumore. Il riferimento MDN su feTurbulence documenta questo comportamento.

Per un’illustrazione web, le consegne utili sono una versione texturizzata da visualizzare e un master pulito. La grana prodotta da questo filtro non è un insieme di puntini modificabili o contorni di taglio.

Separa la forma dal trattamento della superficie

Parti da un semplice tracciato riempito che sia già corretto senza grana. Sistema contorno, aperture e colore prima di aggiungere l’effetto. Un filtro non riparerà quella geometria.

I tre stati seguenti spiegano il problema del confine:

Il confine conta

SourceGraphic fornisce l’elemento filtrato. SourceAlpha fornisce il suo canale alfa. Il filtro opera su un’immagine della grafica; non riscrive i comandi dei tracciati. Questi input e il grafo del filtro sono definiti nella specifica W3C Filter Effects.

Se la grafica iniziale ha già aree trasparenti, anche queste influenzano il contenimento. SourceAlpha segue l’opacità effettivamente renderizzata, non un rettangolo esterno ipotizzato.

Copia un esempio completo di grana SVG

Salvalo come file .svg e aprilo in un browser. Contiene un nostro tracciato a foglia, un seme di rumore deterministico, una sovrapposizione scura e il passaggio esplicito di contenimento. L’apertura diagonale fa parte del tracciato, quindi resta trasparente nella versione texturizzata.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

Il filtro ha quattro compiti:

1. feTurbulence crea il rumore e lo chiama noise.
2. La matrice imposta rosso, verde e blu a zero. L’ultima riga moltiplica l’alfa del rumore per 0.28, creando una tenue sovrapposizione nera chiamata ink.
3. feComposite con operator="in" conserva la sovrapposizione dove esiste SourceAlpha.
4. feMerge disegna prima la grafica originale e sopra di essa la sovrapposizione contenuta.

Il riferimento MDN su feColorMatrix spiega come la matrice a cinque colonne trasforma colore e alfa. Qui modifica l’immagine di rumore, non il riempimento della foglia. Il riferimento MDN su feComposite spiega l’operazione in usata per limitare la sovrapposizione al secondo input.

Il valore 0.28 è un punto di partenza per questa foglia corallo, non un’impostazione universale della grana. Abbassalo se la texture smorza la grafica; alzalo se la grana scompare alla dimensione di visualizzazione prevista. La grana con sovrapposizione nera scurisce il riempimento. Non creerà puntini chiari visibili su un motivo nero.

Per le operazioni di colore e alfa usate per ricolorare grafica esistente, consulta la guida separata a feColorMatrix. Per rendere più netto un bordo trasparente esistente, vedi le soglie alfa SVG. Nessuna delle due operazioni fornisce la sorgente di rumore generato usata qui.

Controlla il risultato alla dimensione che vedranno le persone

Abbiamo creato tre versioni di questo tracciato originale: senza filtro, con un filtro contenente solo la primitiva di rumore e con il grafo completo di grana contenuta sopra. Abbiamo esaminato le versioni renderizzate in Chrome a 120 × 120 e 360 × 360 pixel CSS, con lo stesso viewBox 0 0 200 200.

Il DOM del browser conteneva un tracciato in ogni campione. Tutti e sei gli attributi d erano identici. Questo stabilisce il limite dell’esempio: la superficie renderizzata è cambiata e non sono stati aggiunti tracciati di puntini. È un file di prova creato per il browser, non l’output di PerfectVector o di un editor vettoriale nativo.

Un’anteprima più grande aiuta a esaminare l’effetto, ma la versione più piccola decide se la grafica resta leggibile. Includi entrambe nella revisione. Aumentare le dimensioni di visualizzazione con lo stesso viewBox cambia anche la scala apparente della texture; non presumere che un’anteprima rappresenti ogni uso.

Regola la grana un controllo alla volta

Per una piccola illustrazione in una scheda web, parti dai valori dell’esempio. Poi cambia un parametro, confronta le stesse due dimensioni e conserva una copia della versione preferita.

baseFrequency accetta un valore per entrambi gli assi oppure due valori per la frequenza orizzontale e verticale. Il riferimento MDN su baseFrequency documenta la distinzione. Parti da un valore per questa foglia; valori disuguali sono una scelta deliberata per una texture direzionale.

numOctaves controlla il numero di ottave del rumore, come descritto nel riferimento MDN su numOctaves. Ottave aggiuntive non sono tracciati vettoriali aggiuntivi. Usale solo se migliorano la superficie visibile alle dimensioni necessarie.

L’esempio imposta esplicitamente color-interpolation-filters="sRGB". Mantieni invariata questa impostazione confrontando le alternative, così una modifica nell’elaborazione dei colori non confonderà il confronto della grana.

Correggi un rettangolo, un riempimento mancante o un bordo sporco

La texture crea una chiazza rettangolare. Controlla l’output finale del filtro. Se termina con feTurbulence, restituisce l’immagine del rumore. Ripristina la matrice, la composizione con SourceAlpha e l’unione. Ampliare il rettangolo del filtro darà solo più spazio al rumore non contenuto.

Il colore della foglia scompare. Verifica che il primo nodo di unione usi SourceGraphic. Un risultato finale solo inside contiene la sovrapposizione scura, non il riempimento corallo originale. Controlla anche ortografia e maiuscole di ogni riferimento con nome result e in.

Il rumore resta in un’apertura trasparente. Conferma che il secondo input di composizione sia SourceAlpha, non il rumore rettangolare o uno sfondo opaco. Applica il filtro alla grafica da texturizzare. Includere uno sfondo opaco nel gruppo filtrato cambia l’input alfa.

Parte dell’output viene ritagliata. Controlla x, y, width e height sul filtro. Definiscono la regione disponibile, come descritto nel riferimento MDN su filter. L’esempio offre un po’ di spazio aggiuntivo. Una regione più ampia non ripara un passaggio di contenimento mancante e non corregge il ritaglio imposto da un contenitore separato.

La grafica piccola appare impastata. Riduci prima l’alfa della sovrapposizione, poi confronta frequenza e numero di ottave. Se la texture danneggia ancora la sagoma, consegna la versione pulita a quella dimensione.

Conserva un master pulito per la consegna

Per il master senza filtro, rimuovi filter="url(#grain)" dal tracciato ed elimina la definizione del filtro ormai inutilizzata. Conserva d del tracciato, riempimento e viewBox. Apri quel file separatamente e verifica che foglia e apertura corrispondano alla versione pulita originale.

Per un’app web, controlla la versione texturizzata nei browser e con l’esatto metodo di incorporamento che pubblicherai. Se ripeti questo SVG inline su una pagina, assegna a ogni filtro un ID univoco e aggiorna il riferimento url(#...). L’esempio autonomo usa un solo ID perché contiene una sola istanza.

Per una destinazione che richiede un aspetto raster preciso, esporta un’anteprima raster alla dimensione necessaria e controllala lì. Per un procedimento che richiede geometria modificabile o tagliabile, consegna i tracciati puliti e chiarisci che la grana è un effetto di visualizzazione. Non descrivere il rumore del filtro come puntini vettoriali e non promettere che un editor, esportatore PDF o macchina da taglio successivi lo riproducano. Prova la destinazione effettiva.

Se ti servono deliberatamente puntini modificabili singolarmente, è un lavoro di geometria separato. Richiede anche una decisione sulla pulizia; vedi perché un SVG ha troppi nodi prima di ricalcare una texture in una massa di contorni minuscoli. Conservare la grana di un dipinto raster è un problema iniziale diverso, trattato in da acquerello a vettore.

Quando aiuta la vettorializzazione

Se il motivo pulito sopravvive solo come PNG o JPG, converti quella sorgente in grafica SVG modificabile prima di aggiungere un filtro del browser. Controlla prima sagoma e apertura recuperate nella versione pulita. PerfectVector fornisce il passaggio da raster a vettore; il grafo di grana procedurale di questa guida è un trattamento SVG separato da aggiungere dopo.

Hai già il master basato su tracciati? Usalo direttamente. Una seconda conversione non serve per il lavoro del filtro. La guida alla vettorializzazione delle immagini spiega quel passaggio di recupero della sorgente se ti occorre.

Domande frequenti

Perché feTurbulence crea un rettangolo invece di seguire la mia forma? Il rumore riempie la sottoregione della primitiva del filtro. Componilo dentro SourceAlpha e uniscilo sopra SourceGraphic per limitare la sovrapposizione alla grafica conservandone il riempimento.

La grana SVG aggiunge nodi al tracciato? Questo filtro non aggiunge tracciati di puntini. Nel file di prova originale nel browser, tutti e sei i campioni conservavano un tracciato con dati d identici; il filtro cambiava la superficie renderizzata.

Da quali impostazioni della grana dovrei partire? Per la foglia originale dell’esempio, parti da fractalNoise, baseFrequency 0.65, due ottave, seed 8 e un moltiplicatore alfa della sovrapposizione nera di 0.28. Confronta alla dimensione reale di visualizzazione e regola un’impostazione alla volta.

Posso usare l’effetto grana come file di taglio? La texture generata non è geometria di taglio modificabile. Conserva un master separato dei tracciati senza filtro e controlla la geometria nel procedimento di taglio effettivo.

Fonti

1. MDN: feTurbulence — Generazione del rumore e sottoregione della primitiva.
2. W3C: Albero delle primitive del filtro — SourceGraphic, SourceAlpha ed elaborazione delle immagini del filtro.
3. MDN: feColorMatrix — Operazioni della matrice su colore e alfa.
4. MDN: feComposite — Contenimento con l’operatore in.
5. MDN: baseFrequency — Valori di frequenza su uno e due assi.
6. MDN: numOctaves — Strati di dettaglio del rumore.
7. MDN: filter — Attributi della regione del filtro.

Se la tua illustrazione web richiede un master pulito recuperato da raster, parti dalla conversione da immagine a vettore, verifica i tracciati e aggiungi grana a una copia di visualizzazione separata.