SVG feMorphology: un contorno senza nuovi tracciati

Per contornare l'intera sagoma di un SVG multicolore, dilata il suo SourceAlpha, sottrai l'alfa originale dal risultato più grande, colora l'anello rimanente e sovrapponi la grafica originale. Il filtro cambia l'aspetto renderizzato, mentre i dati dei tracciati originali restano intatti.

Usa operator="erode" quando vuoi invece una sagoma alfa più piccola. Nessuna delle due operazioni crea un tracciato offset modificabile. Fori, spazi stretti e angoli acuti richiedono un controllo visivo, perché la morfologia usa un intorno rettangolare anziché un offset circolare del tratto.

Parti dalla sagoma, non dai canali di colore

La specifica W3C Filter Effects definisce la dilatazione come il massimo di ogni componente in un intorno rettangolare e l'erosione come il minimo. Con SourceAlpha, l'input è il canale alfa della grafica. Questo permette di ricavare una sagoma senza espandere separatamente i canali di colore verde petrolio e corallo.

Questo esempio applica il filtro all'intera grafica composta da due tracciati. Il suo foro quadrato trasparente fa parte della sagoma alfa. L'inserto corallo si trova già all'interno di un'area verde petrolio opaca, quindi non crea un bordo esterno separato.

Abbiamo creato l'SVG a mano e aperto cinque varianti autonome in un browser. Ogni file mantiene le stesse due definizioni dei tracciati originali. Il confronto qui sotto mostra il rendering reale di quei file, senza grafica ricalcata o anteprime dell'effetto generate.

Con raggio 10, il contorno cresce all'esterno della sagoma visibile e dentro il foro. Con 22, l'oro riempie l'apertura quadrata di questo campione. La versione 18 4 cresce più in orizzontale che in verticale. L'erosione riduce l'area esterna opaca e ingrandisce l'apertura trasparente; anche la punta inferiore cambia.

Queste osservazioni riguardano questa grafica e queste impostazioni. Non costituiscono una regola generale sul raggio sicuro per altri loghi o icone.

Costruisci l'anello alfa esterno

Salva questo esempio completo come outline.svg e aprilo in un browser. È esattamente l'SVG con raggio 10 usato nella cattura:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Il filtro esegue quattro passaggi:

1. feMorphology dilata SourceAlpha in grown.
2. feComposite mantiene grown all'esterno dell'alfa originale, producendo ring.
3. feFlood fornisce un colore dorato; un'altra composizione limita quel colore all'anello.
4. feMerge posiziona il SourceGraphic originale sopra l'anello colorato.

L'ordine degli input conta nella sottrazione. La sezione della specifica sulla composizione assegna a in il ruolo di sorgente e a in2 quello di destinazione. Qui in="grown", in2="SourceAlpha" e operator="out" rimuovono l'area opaca originale dall'alfa espanso. Invertire questi input non produce questo anello esterno.

La parola esterno significa esterno alla regione alfa opaca, compreso lo spazio dentro un foro trasparente. Se un contorno deve evitare le aperture interne, questo filtro non fornisce automaticamente tale distinzione. Serve una sagoma separata o un'altra costruzione che definisca l'esterno desiderato.

I colori sorgente rimangono visibili perché uniamo per ultimo il SourceGraphic non modificato. Questo è diverso dal normale tratto di un tracciato. Per tratti centrati, ritagliati all'interno o mascherati all'esterno, consulta l'allineamento del tratto SVG; l'ordine di disegno spiega il caso più semplice di sovrapposizione tra tratto e riempimento.

Erodi l'alfa e mantieni i colori sopravvissuti

Sostituisci il filtro del contorno con la seguente definizione e cambia l'elemento use finale in filter="url(#erode)":

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Questa composizione conserva la grafica originale solo dove rimane l'alfa eroso. Non sovrappone nuovamente l'intero originale, perché ciò nasconderebbe l'assottigliamento voluto. In questo campione l'area esterna verde petrolio diventa più piccola, mentre la regione corallo sopravvive al suo interno.

Specifica esplicitamente l'operatore negli esempi che usi. Il riferimento di operator distingue erode e dilate su feMorphology da in e out su feComposite. Lo stesso nome di attributo svolge compiti diversi sui due elementi. L'operatore predefinito della morfologia è erode, quindi ometterlo è un modo facile per ottenere l'effetto opposto alla dilatazione desiderata.

Separa le unità del raggio dalla regione del filtro

Il riferimento di radius accetta uno o due numeri. Un solo numero si applica a entrambi gli assi; con due, il primo è il raggio x e il secondo il raggio y. Per i due ulteriori stati del contorno, cambia soltanto radius="10" in radius="22" o radius="18 4" nell'esempio completo.

Sono raggi nel sistema di coordinate scelto da primitiveUnits, non una garanzia di bordo fisso in pixel CSS a ogni dimensione di visualizzazione. Usiamo esplicitamente primitiveUnits="userSpaceOnUse" con un viewBox 0 0 300 220. Ridimensionare l'SVG visualizzato scala l'aspetto insieme alla grafica.

Due attributi con nomi simili controllano cose diverse:

Il riferimento MDN di primitiveUnits documenta il sistema di coordinate delle primitive. Il riferimento di filterUnits documenta separatamente la regione esterna. filterUnits ha come valore predefinito objectBoundingBox; primitiveUnits ha come valore predefinito userSpaceOnUse. Impostarli entrambi esplicitamente rende il campione più facile da esaminare.

La sorgente occupa da x=50 a 250 e da y=60 a 195. Il maggiore raggio uguale sui due assi provato è 22, e la regione del filtro e il viewport di 300 per 220 lasciano spazio per quel risultato. Ricontrolla entrambi i limiti quando cambi la grafica o il raggio. La specifica descrive la regione del filtro come un limite di ritaglio netto: un raggio maggiore non può disegnare oltre tale regione. La guida al ritaglio del filtro e del viewport SVG mostra questi due limiti separati.

Se il filtro sembra inattivo, esamina anche radius. Il suo valore predefinito è 0 e il riferimento afferma che un valore negativo o zero disabilita l'effetto della primitiva. Gli esempi sopra usano valori positivi espliciti su entrambi gli assi.

Esamina fori e angoli prima della consegna

L'intorno rettangolare della morfologia rende il suo aspetto diverso da un contorno arrotondato convenzionale. Raggi x e y uguali non trasformano quell'intorno in un cerchio. La punta inferiore a gradini nel confronto è un punto utile per esaminare la differenza.

Abbiamo verificato che tutti e cinque i file contengono ancora due tracciati sorgente con attributi d identici. Le definizioni dei filtri differiscono; la geometria sorgente no. Esamina gli oggetti SVG effettivi quando la destinazione richiede tracciati che puoi modificare, spostare mediante offset o inviare in produzione. Usa un'operazione geometrica dell'editor per questa esigenza, poi controlla i contorni risultanti. Cambiare o rimuovere questo filtro, da solo, non li fornisce.

Mantieni un originale senza filtro e una copia separata per la consegna. Apri il file consegnato nella sua destinazione effettiva e confronta angoli, aperture interne, colori e limiti. Questo esempio nel browser non dimostra il supporto in una particolare app di design, esportatore o macchina da taglio.

Prepara la sorgente prima di aggiungere l'effetto

PerfectVector può aiutare quando la grafica iniziale esiste soltanto come PNG o JPG. Prepara un candidato SVG, poi esamina la sagoma sorgente ricostruita, i piccoli fori e i confini dei colori prima di applicare il filtro. Un contorno morfologico amplifica i problemi di quella sagoma anziché riparare per te la geometria desiderata.

Usa direttamente un originale vettoriale disponibile. Per un simbolo semplice, il ridisegno manuale può essere più facile da controllare. Ricalcare un'immagine appiattita con un contorno incorporato non recupera le impostazioni originali del filtro né stabilisce quale parte fosse la forma senza filtro. La panoramica sulla vettorializzazione delle immagini spiega questo limite della ricostruzione.

FAQ

feMorphology crea un tracciato di contorno modificabile? No. Cambia il risultato renderizzato del filtro. Questo esempio mantiene gli stessi due tracciati sorgente, quindi una destinazione che richiede un contorno separato necessita di un'operazione geometrica e di un controllo dell'importazione.

Perché il contorno dorato riempie il foro del mio SVG? L'anello cresce all'esterno dell'alfa opaco, anche dentro le aperture trasparenti. In questo campione, il raggio 22 riempie il foro quadrato. Altre grafiche richiedono un proprio controllo degli spazi e del raggio.

Perché usare SourceAlpha anziché SourceGraphic? SourceAlpha permette al filtro di operare sulla sagoma senza dilatare ogni canale di colore originale. L'esempio colora separatamente quell'anello alfa e unisce SourceGraphic per ultimo per mostrare i colori originali.

Fonti

1. W3C — Filter Effects Level 1 — Definisce l'intorno rettangolare della morfologia, gli input di composizione e il ritaglio della regione del filtro.
2. MDN — radius — Definisce la sintassi del raggio con uno e due valori, le unità e i valori che disabilitano l'effetto.
3. MDN — operator — Distingue le operazioni morfologiche da quelle di composizione.
4. MDN — primitiveUnits — Stabilisce il sistema di coordinate per il raggio della morfologia.
5. MDN — filterUnits — Stabilisce il sistema di coordinate per la regione esterna del filtro.

Se la tua sorgente è soltanto raster, prepara la grafica vettoriale con PerfectVector, verifica la sagoma e le aperture senza filtro, poi aggiungi il contorno e confronta il file finale nel visualizzatore di destinazione.