> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Bordi SVG: anteprima con feConvolveMatrix > Crea un'anteprima dei bordi SVG con feConvolveMatrix, diagnostica artefatti di alfa e margini, confronta un kernel di nitidezza e verifica la presenza di veri tracciati. Source: https://perfectvector.com/it/blog/svg-convolution-edge-preview Language: it Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 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`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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: ```text -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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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. ```xml ``` La definizione del filtro ha effetto solo perché l'immagine la richiama con `filter="url(#effect)"`. La [documentazione dei filtri SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) 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. | Campione | Aspetto osservato | Lettura in un campione uniforme | | ----------------------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------- | | PNG originale in SVG | Rombo grigio con centro e foglio bianchi | Grigio uniforme: RGBA 64, 64, 64, 255 | | Kernel per i bordi, alfa preservato | Campo nero con risposta sui bordi; contorno tenue nella visualizzazione più grande | Centro e angolo: RGBA 0, 0, 0, 255 | | Kernel per i bordi, alfa filtrato | Risultato trasparente in questo campione | Centro, angolo e campione uniforme: RGBA 0, 0, 0, 0 | | Controllo di nitidezza | Rombo pieno conservato, con pixel di confine modificati | Il grigio uniforme è rimasto RGBA 64, 64, 64, 255 | | Kernel per i bordi, margine a valore zero | Comparsa di una cornice esterna luminosa | Angolo: RGBA 255, 255, 255, 255 | | Controllo con tracciato scritto a mano | Rombo geometrico pulito con apertura interna sul foglio bianco | Un elemento tracciato, nessun elemento immagine | 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** ![Illustrazione concettuale che contrappone un rombo in scala di grigi ottenuto dalla risposta dei pixel sui bordi a un anello a rombo color corallo disegnato separatamente con nodi di modifica](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *Illustrazione: un'anteprima dei bordi basata sui pixel e un tracciato modificabile hanno rappresentazioni diverse. Non è una schermata del browser né un risultato di conversione.* ## 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) 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: ```text 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 `` il cui `href` comincia con `data:image/png`. La [documentazione dell'elemento image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/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: ```xml ``` 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](https://perfectvector.com/it/blog/svg-contains-raster-image) 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](https://perfectvector.com/it/blog/line-art-to-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](https://perfectvector.com/it/image-to-vector), 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](https://perfectvector.com/it/blog/what-is-image-vectorization) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — Convoluzione con i pixel vicini ed elaborazione predefinita del colore. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — Normalizzazione e valore predefinito per la somma zero. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Definizione e applicazione di un effetto filtro. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — Elaborazione del solo colore o anche dell'alfa. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — Spostamento della risposta dopo la divisione. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — Duplicazione, ripetizione dal bordo opposto e gestione del margine a zero. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — Regole del punto di riferimento e del campionamento. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — Contenuto raster e SVG richiamato. ## Explore - [Read the HTML article](https://perfectvector.com/it/blog/svg-convolution-edge-preview) - [Icone SVG in MapLibre: controlla pixel e dimensioni](https://perfectvector.com/it/blog/maplibre-svg-symbol-image.md) - [Loghi SVG in Satori: conserva la grafica nella card](https://perfectvector.com/it/blog/satori-svg-logo.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)