Filtri luce SVG: ombreggia un emblema e conserva il foro

Per un logo SVG dall'aspetto in rilievo, ammorbidisci SourceAlpha, passa quell'alfa a feDiffuseLighting o feSpecularLighting, combina la luce con il colore sorgente e termina con una composizione in rispetto al SourceAlpha originale. Quest'ultimo passaggio mantiene l'effetto dentro l'emblema e ne conserva l'apertura. Salva una copia non filtrata del tracciato come master piatto.

L'effetto cambia l'aspetto renderizzato. Non crea un solido in rilievo, un nuovo contorno o un file di fabbricazione. Questa procedura usa un emblema originale a forma di anello romboidale, scritto direttamente in SVG, per confrontare le fasi di illuminazione e il loro alfa.

Usa l'alfa come superficie per la luce

feDiffuseLighting usa l'alfa di ingresso come mappa di rilievo e produce una mappa di luce opaca. Il suo aspetto dipende dalla luce e dalla superficie di ingresso. La documentazione MDN della luce diffusa spiega questo comportamento. In questo esempio, le parti opache dell'anello forniscono l'area alta e la sua apertura quella bassa.

Sfochiamo soltanto SourceAlpha, lasciando disponibile il tracciato colorato originale come SourceGraphic. L'alfa ammorbidito dà al calcolo della luce una transizione graduale sui bordi interni ed esterni. feGaussianBlur controlla quell'ammorbidimento tramite stdDeviation; l'esempio usa 2.5 in un filtro esplicito nello spazio utente.

La mappa diffusa grezza dipinge tutta l'area del filtro, compresi i punti in cui il tracciato originale era trasparente. È utile per esaminare il calcolo della luce, ma è la sagoma finale sbagliata per il nostro emblema forato. Mantieni disponibile l'alfa originale per il passaggio finale che limita l'effetto.

Copia l'esempio completo dell'emblema ombreggiato

Salvalo come emblem-lighting.svg e aprilo in un browser. Ha un tracciato composto e nessuna dipendenza da immagini esterne.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

Il filtro assegna un nome a ogni risultato intermedio per consentirti di esaminarne il ruolo:

La moltiplicazione aritmetica usa k1="1" con gli altri coefficienti a zero. La somma usa k2="1" k3="1" con gli altri a zero. feComposite definisce queste operazioni sui pixel e l'operatore in. Quando vuoi il confine originale, mantieni SourceAlpha, non il bump sfocato, come secondo ingresso della composizione finale.

Il filtro usa esplicitamente color-interpolation-filters="linearRGB", che è il valore predefinito per le operazioni dei filtri SVG. È distinto dalla normale interpolazione del colore. La documentazione MDN di color-interpolation-filters descrive la differenza. Tutte le varianti di illuminazione misurate qui usano la stessa impostazione.

Confronta l'ombreggiatura diffusa con la brillantezza speculare

La luce diffusa scurisce e schiarisce il colore originale secondo la mappa di luce. La fase speculare aggiunge una componente di riflessione. feSpecularLighting documenta l'uscita dipendente dalla luce e i suoi parametri. L'esempio usa una costante contenuta di .7 e un esponente di 18; regolali dopo aver ottenuto un trattamento diffuso utilizzabile.

Per esaminare la sola luce diffusa, mantieni le fasi di sfocatura, diffusione e moltiplicazione, poi cambia il primo ingresso della composizione finale da paint a lit. Rimuovi le fasi speculare e di somma.

Per esaminare la sola luce speculare sul colore piatto, mantieni le fasi di sfocatura e speculare. Cambia il primo ingresso della somma da lit a SourceGraphic, rimuovi le fasi diffusa e di moltiplicazione e conserva la composizione finale paint in SourceAlpha. Entrambi i confronti mantengono lo stesso tracciato originale e la stessa direzione della luce.

La nostra luce distante usa azimuth="225" elevation="45". feDistantLight è un elemento sorgente luminosa per entrambe le primitive di illuminazione. Questi angoli sono in gradi, non posizioni in pixel. Quando confronti un trattamento combinato, cambia insieme la direzione in entrambe le fasi di illuminazione.

Che cosa hanno mostrato i controlli originali nel browser

Abbiamo aperto sei campioni SVG originali in Chrome a 80 × 80 e 160 × 160 pixel CSS. Il master piatto e i trattamenti diffuso, speculare e combinato sono rimasti visibilmente distinti. Il surfaceScale diffuso più alto ha aumentato il contrasto dei bordi in questo campione. Il controllo diffuso grezzo mostrava un rettangolo grigio con l'apertura piena anziché una sagoma trasparente.

Letture separate dei pixel hanno usato la tela sorgente da 200 × 200. Il campione della fascia era a (100, 38), quello del bordo a (101, 22), l'apertura a (100, 100) e il campione esterno a (10, 10).

Ogni file ha conservato lo stesso valore d, un tracciato e zero elementi immagine. L'effetto a schermo non ha prodotto geometria sorgente aggiuntiva. Sono osservazioni su questo browser e questa sorgente, non garanzie riguardo a un altro renderer o all'importazione in un editor.

Illuminazione e master piatto

Regola il campo di altezza prima di cambiare il contorno

surfaceScale imposta la scala dell'altezza della superficie usata dal calcolo della luce. Non espande il tracciato. I nostri controlli diffusi 4 e 12 cambiavano soltanto questo valore: la fascia piatta campionata è rimasta dello stesso colore, mentre il campione sul bordo è diventato più scuro a 12.

Usa una sequenza controllata:

1. Stabilisci la sagoma trasparente e l'apertura originali senza filtro.
2. Scegli l'ammorbidimento dell'alfa e la direzione della luce.
3. Confronta un surfaceScale piccolo e uno più grande mantenendo fisso tutto il resto.
4. Aggiungi la brillantezza speculare, poi limita il colore con l'alfa originale come operazione finale.
5. Controlla la grafica consegnata alle sue dimensioni effettive di visualizzazione e su uno sfondo contrastante.

L'attuale specifica Filter Effects definisce l'alfa dell'uscita diffusa come uno ovunque e quello dell'uscita speculare a partire dalle sue componenti cromatiche. Non presumere che nessuna delle due uscite conservi l'apertura originale. Definisce anche il calcolo della normale dai campioni alfa vicini. Questo esempio lascia kernelUnitLength non impostato; la nostra ispezione a due dimensioni non dimostra campioni di illuminazione indipendenti dalla dimensione.

Se il buffer intermedio di una fase di illuminazione appare come risultato finale, controlla gli ingressi nominati e l'ultima primitiva. Per questo anello, restituire direttamente la mappa di luce diffusa è il modo in cui abbiamo riprodotto il rettangolo grigio opaco. Il passaggio finale in SourceAlpha è deliberato, anche quando una moltiplicazione precedente sembra già preservare la trasparenza.

Se una sfocatura o un effetto viene tagliato da un rettangolo inatteso, esamina l'area del filtro con la guida al ritaglio SVG. Tieni quell'area separata dal contenimento finale tramite l'alfa sorgente: una delimita l'area di lavoro dell'effetto, l'altro ripristina la sagoma prevista.

Consegna il trattamento a schermo con un master piatto

Rimuovi l'attributo filter del tracciato per esaminare il master piatto. Conserva lo stesso contorno esterno, l'apertura interna e il riempimento corallo uniforme. Mantieni quella copia insieme alla versione web ombreggiata, così le modifiche successive potranno partire dalla geometria originale.

Per una finitura fisica, usa un flusso di preparazione separato come la grafica vettoriale per la stampa in rilievo. Una preimpostazione di illuminazione a schermo fornisce un aspetto, non geometria per una matrice o una profondità di rilievo misurata. La guida al contorno morfologico SVG spiega un altro trattamento dei confini basato su filtri senza considerarlo tracciati ricostruiti.

Se il tuo logo esiste solo come PNG o JPG, vettorizzalo con PerfectVector, esamina il contorno esterno e l'apertura recuperati e conserva un master piatto pulito prima di aggiungere l'illuminazione nel tuo flusso SVG. Il servizio recupera geometria vettoriale; questa sequenza diffusa/speculare è un trattamento di visualizzazione scritto separatamente. Se hai già il master vettoriale, applica e verifica direttamente il filtro.

Domande frequenti

I filtri di illuminazione SVG possono far sembrare un logo in rilievo? Possono simulare ombre e punti luce da un campo di altezza basato sull'alfa. Il trattamento renderizzato non crea un rilievo fisico, contorni aggiuntivi o un file per una matrice di produzione.

Perché l'effetto di illuminazione SVG riempie l'apertura trasparente? Una mappa di luce diffusa grezza è opaca in tutta la sua area di filtro. Combina la luce con il colore sorgente e termina con una composizione in rispetto al SourceAlpha originale per contenere il trattamento nella sagoma originale.

Qual è la differenza tra illuminazione SVG diffusa e speculare? La luce diffusa fornisce un'illuminazione ampia per ombreggiare il colore originale. La luce speculare fornisce una componente di riflessione da aggiungere come brillantezza. Entrambe usano l'alfa di ingresso come mappa di rilievo e dipendono dalle impostazioni scelte per luce e superficie.

surfaceScale cambia il tracciato del logo? No. Cambia la scala di altezza usata nel calcolo della luce. Nei nostri due controlli diffusi, i dati del tracciato sono rimasti identici mentre cambiava il contrasto dei bordi renderizzati.

Fonti

1. MDN feDiffuseLighting — Ingresso come mappa di rilievo alfa e uscita di luce diffusa opaca.
2. MDN feGaussianBlur — Ingresso ammorbidito e considerazioni sull'area del filtro.
3. MDN feComposite — Moltiplicazione/somma aritmetica e contenimento tramite alfa sorgente.
4. MDN color-interpolation-filters — Valore predefinito linearRGB per le operazioni dei filtri.
5. MDN feSpecularLighting — Componente di riflessione e relativi controlli.
6. MDN feDistantLight — Una sorgente luminosa per entrambe le primitive di illuminazione.
7. MDN surfaceScale — Scala di altezza della superficie per il calcolo.
8. Specifica dell'illuminazione Filter Effects — Alfa dell'illuminazione, unità angolari e calcoli sui campioni vicini.