Bordi SVG: anteprima con feConvolveMatrix

Il rilevamento dei bordi SVG con feConvolveMatrix modifica i pixel renderizzati intorno ai confini di colore. Può produrre un'anteprima dei bordi da un PNG dentro un SVG, ma non crea contorni di tracciato modificabili. Tieni chiara questa distinzione se il passo successivo è modificare un logo, preparare un disegno al tratto o creare una grafica web.

Un primo test utile è una piccola immagine in scala di grigi con una forma nota. Applica un kernel simmetrico per i bordi, preservane l'alfa e confrontala con la sorgente invariata. Poi esamina gli elementi SVG. Un confine che appare più netto non dimostra che l'immagine sia diventata geometria vettoriale.

Parti da un'anteprima dei bordi controllata

La documentazione di feConvolveMatrix descrive la convoluzione come un calcolo che coinvolge un pixel di ingresso e quelli vicini. Questo kernel 3 × 3 sottrae gli otto vicini da otto volte il centro:

-1 -1 -1
-1  8 -1
-1 -1 -1

La somma dei coefficienti è zero. In un'area uniforme, la risposta è zero; in corrispondenza di una variazione di luminosità può essere positiva o negativa. Con bias="0", i risultati negativi vengono tagliati al limite inferiore del colore. L'anteprima quindi non mostra allo stesso modo entrambi i lati di ogni confine.

L'esempio usa esplicitamente divisor="1". La documentazione di divisor descrive la normalizzazione con quel valore e il valore predefinito di 1 per un kernel a somma zero. Imposta anche color-interpolation-filters="sRGB", così l'esempio usa i valori dei canali sRGB invece dell'elaborazione linearRGB predefinita della primitiva.

Salva questo file completo e autonomo come edge-preview.svg e aprilo in un browser. Il PNG incorporato è un rombo originale in scala di grigi da 48 × 48 su un foglio bianco opaco. Il centro è bianco, non trasparente.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

La definizione del filtro ha effetto solo perché l'immagine la richiama con filter="url(#effect)". La documentazione dei filtri SVG spiega che la definizione in sé non viene disegnata. L'area esplicita copre questa sorgente da 48 × 48; altre grafiche richiedono un proprio controllo dell'area.

Che cosa è cambiato nel test nel browser

Abbiamo esaminato sei campioni originali in Chrome a 48 e 192 pixel CSS. Cinque file contengono un'immagine PNG incorporata e nessun tracciato. Il sesto è una controparte vettoriale scritta a mano in modo indipendente. È un controllo geometrico, non il risultato dell'applicazione del filtro o del ricalco del PNG.

I campioni RGBA provengono dalla lettura su Canvas a 48 × 48 di ogni SVG renderizzato. I campioni visualizzati sono stati controllati separatamente a entrambe le dimensioni. Sono osservazioni per questa sorgente e questo browser, non una garanzia di compatibilità o leggibilità. Ingrandire l'anteprima basata su raster non ha recuperato un contorno più pulito.

Risposta dei pixel e geometria modificabile

Ripristina un risultato scomparso senza eliminare il foglio

preserveAlpha è false per impostazione predefinita. Con quel valore, il kernel elabora anche l'alfa. Il nostro ingresso opaco ha alfa 1 ovunque, quindi il kernel a somma zero annulla l'alfa uniforme insieme al colore uniforme. Il risultato è scomparso nel campione esaminato.

Impostare preserveAlpha="true" mantiene l'alfa della sorgente mentre elabora il colore. La documentazione di preserveAlpha descrive questa distinzione. In questo test ripristina un'anteprima dei bordi opaca. Mantiene opachi anche il foglio e il centro bianco, benché il loro colore filtrato diventi nero. Preservare l'alfa non rimuove uno sfondo e non trova i fori di un logo.

Se l'anteprima è quasi tutta nera, confronta prima un'area uniforme nota con un confine noto. Il nero può essere una risposta zero valida. Per esaminare variazioni di luminosità positive e negative intorno a un tono medio, prova bias="0.5"; la documentazione di bias spiega lo scostamento aggiunto dopo la divisione. Questo cambia l'intervallo visualizzato, non la geometria dell'SVG.

Controlla i margini separatamente dalla grafica

Mantieni edgeMode="duplicate" per il confronto iniziale. Estende i valori dei pixel sul bordo quando i campioni vicini cadono fuori dall'ingresso. none usa campioni RGBA a valore zero; wrap prende campioni dal bordo opposto. Sono regole distinte nella documentazione di edgeMode.

Nel nostro cartoncino bianco opaco, cambiare solo duplicate in none ha prodotto una cornice luminosa all'esterno del cartoncino. Quel confine appartiene al rettangolo dell'immagine, non al rombo. Confronta il file non filtrato prima di trattare una cornice come un contorno della grafica.

La specifica Filter Effects definisce il punto di riferimento del kernel e il comportamento del campionamento. Qui targetX="1" e targetY="1" centrano il kernel 3 × 3. Questo esempio iniziale lascia kernelUnitLength non impostato. Non presumere che un campione vicino disti sempre un'unità utente SVG a ogni dimensione di visualizzazione; esamina il rendering consegnato.

Usa la nitidezza come controllo, non per recuperare la sfocatura

Per conservare la grafica piena enfatizzando le variazioni locali, sostituisci soltanto kernelMatrix con:

0 -1  0
-1 5 -1
0 -1  0

La somma è 1. Un valore di canale uniforme c restituisce 5c - 4c = c con divisore 1 e bias 0. Nel nostro campione il grigio uniforme è rimasto a 64, mentre i pixel di confine sono cambiati. Mantieni preserveAlpha="true" e edgeMode="duplicate" per questo confronto.

L'aumento di nitidezza può enfatizzare rumore e aloni insieme ai confini utili. Non recupera i dettagli della sorgente persi prima che l'immagine arrivasse al filtro. Se un'anteprima ingrandita appare scadente, torna all'immagine originale invece di considerare un kernel più forte un sostituto della risoluzione sorgente.

Esamina il file prima di chiamarlo ricalco vettoriale

L'esempio iniziale pubblicato contiene un <image> il cui href comincia con data:image/png. La documentazione dell'elemento image descrive le risorse raster e SVG che questo elemento può visualizzare. Qui il tipo di contenuto identifica il raster incorporato; il filtro dei bordi lascia quell'elemento al suo posto.

Per confronto, il master scritto in modo indipendente usa questo tracciato composto sopra un rettangolo bianco:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

Quelle coordinate sono state scritte separatamente. Non sono recuperate dall'immagine filtrata, e il disegno a pixel e il controllo geometrico non devono necessariamente corrispondere in ogni campione di confine. La guida all'ispezione del raster incorporato spiega come controllare un SVG misto senza affidarsi al solo zoom.

Per la grafica web, conserva il master SVG non filtrato e usa una copia di visualizzazione filtrata quando l'effetto serve al progetto. Per tracciati destinati alla modifica o alla produzione, esamina i veri contorni sorgente e l'apertura interna. La guida dal disegno al tratto all'SVG tratta questo compito geometrico.

PerfectVector è adatto quando la grafica iniziale è un PNG o JPG piatto e ti servono forme sorgente modificabili. Converti l'immagine originale in SVG, esamina il contorno e l'apertura interna e conserva il risultato pulito come master. Un'anteprima dei bordi riuscita non sostituisce questo controllo. La guida alla vettorizzazione spiega in che modo ricostruire tracciati differisce dall'applicare un effetto a un'immagine.

Domande frequenti

Il rilevamento dei bordi SVG con feConvolveMatrix crea tracciati vettoriali? No. Calcola un effetto sui pixel renderizzati. Il PNG incorporato in questo esempio rimane un elemento immagine; i contorni modificabili richiedono geometria disegnata o ricalcata separatamente.

Perché il filtro dei bordi fa scomparire la grafica? Controlla preserveAlpha. Il valore predefinito false filtra anche l'alfa. In questo campione opaco, il kernel a somma zero ha reso trasparente il risultato esaminato. Preservare l'alfa ha ripristinato un'anteprima opaca.

preserveAlpha rimuove lo sfondo bianco? No. Mantiene l'alfa sorgente. Uno sfondo bianco opaco rimane opaco anche quando il suo colore filtrato diventa nero. Rimozione dello sfondo e ricostruzione dei tracciati sono compiti separati.

Perché un filtro dei bordi disegna una cornice intorno all'immagine? Esamina edgeMode e il rettangolo di ingresso. Usare campioni a valore zero fuori dal nostro cartoncino bianco opaco ha creato un bordo esterno luminoso. La duplicazione dei pixel sul bordo ha evitato quella cornice in questo campione.

Fonti

1. MDN: feConvolveMatrix — Convoluzione con i pixel vicini ed elaborazione predefinita del colore.
2. MDN: divisor — Normalizzazione e valore predefinito per la somma zero.
3. MDN: filter — Definizione e applicazione di un effetto filtro.
4. MDN: preserveAlpha — Elaborazione del solo colore o anche dell'alfa.
5. MDN: bias — Spostamento della risposta dopo la divisione.
6. MDN: edgeMode — Duplicazione, ripetizione dal bordo opposto e gestione del margine a zero.
7. W3C: Filter Effects, feConvolveMatrix — Regole del punto di riferimento e del campionamento.
8. MDN: image — Contenuto raster e SVG richiamato.