> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Detecção de bordas SVG: prévia com feConvolveMatrix > Crie uma prévia de bordas SVG com feConvolveMatrix, diagnostique artefatos de alfa e borda, compare um kernel de nitidez e confira se a origem contém caminhos reais. Source: https://perfectvector.com/pt-BR/blog/svg-convolution-edge-preview Language: pt-BR Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 A detecção de bordas SVG com `feConvolveMatrix` muda os pixels renderizados ao redor dos limites de cor. Ela pode produzir uma prévia de bordas a partir de um PNG dentro de um SVG, mas não cria contornos de caminho editáveis. Mantenha essa distinção clara quando o próximo trabalho for editar um logotipo, preparar arte de linhas ou criar arte web. Um primeiro teste útil é uma imagem pequena em tons de cinza com uma forma conhecida. Aplique um kernel simétrico de bordas, preserve o alfa e compare com a origem inalterada. Depois examine os elementos SVG. Um limite aparentemente mais nítido não estabelece que a imagem se tornou geometria vetorial. ## Comece com uma prévia controlada de bordas A [referência de `feConvolveMatrix`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) descreve convolução como um cálculo envolvendo um pixel de entrada e seus vizinhos. Este kernel 3 × 3 subtrai os oito vizinhos de oito vezes o centro: ```text -1 -1 -1 -1 8 -1 -1 -1 -1 ``` A soma dos coeficientes é zero. Em uma área uniforme, a resposta é zero; em uma mudança de brilho, pode ser positiva ou negativa. Com `bias="0"`, resultados negativos são limitados ao limite inferior de cor. Portanto, a prévia não mostra igualmente os dois lados de todo limite. O exemplo usa `divisor="1"` explícito. A [referência de divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) documenta a normalização por esse valor e o padrão 1 para um kernel de soma zero. Ele também define `color-interpolation-filters="sRGB"`, para usar valores de canais sRGB em vez do processamento linearRGB padrão da primitiva. Salve este arquivo completo e independente como `edge-preview.svg` e abra em um navegador. O PNG incorporado é um losango original em tons de cinza, de 48 × 48, sobre papel branco opaco. O centro é branco, não transparente. ```xml ``` A definição do filtro só tem efeito porque a imagem a referencia com `filter="url(#effect)"`. A [referência de filter SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) explica que a definição em si não é desenhada. A região explícita cobre esta origem de 48 × 48; outra arte precisa de sua própria verificação de região. ## O que mudou no teste de navegador Examinamos seis exemplos originais no Chrome a 48 e 192 pixels CSS. Cinco arquivos contêm uma imagem PNG incorporada e nenhum caminho. O sexto é uma contraparte vetorial desenhada à mão de forma independente. É um controle de geometria, não o resultado de aplicar o filtro ou traçar o PNG. | Exemplo | Aparência observada | Leitura em uma amostra uniforme | | -------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------- | | PNG original em SVG | Losango cinza com centro e papel brancos | Cinza sólido: RGBA 64, 64, 64, 255 | | Kernel de bordas, alfa preservado | Campo preto com resposta de borda; contorno fraco na exibição maior | Centro e canto: RGBA 0, 0, 0, 255 | | Kernel de bordas, alfa também filtrado | Resultado transparente neste arquivo de teste | Centro, canto e amostra sólida: RGBA 0, 0, 0, 0 | | Controle de nitidez | Losango preenchido mantido, com pixels de limite alterados | Cinza sólido continuou RGBA 64, 64, 64, 255 | | Kernel de bordas, borda de valor zero | Surgiu uma moldura externa clara | Canto: RGBA 255, 255, 255, 255 | | Controle de caminho desenhado à mão | Losango geométrico limpo e abertura interna sobre papel branco | Um elemento de caminho, nenhum elemento de imagem | As amostras RGBA vieram da leitura de um Canvas de 48 × 48 de cada SVG renderizado. Os exemplos exibidos foram verificados separadamente nos dois tamanhos. São observações desta origem e deste navegador, não uma garantia de compatibilidade ou legibilidade. Ampliar a prévia baseada em raster não recuperou um contorno mais limpo. **Resposta de pixels e geometria editável** ![Ilustração conceitual contrastando um losango em tons de cinza com resposta de bordas em pixels e um anel losangular coral desenhado de forma independente com nós de edição](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *Ilustração: uma prévia de bordas em pixels e um caminho editável têm representações diferentes. Não é uma captura de navegador nem um resultado de conversão.* ## Corrija um resultado que desaparece sem apagar o papel O padrão de `preserveAlpha` é false. Com essa configuração, o kernel também processa alfa. Nossa entrada opaca tem alfa 1 em toda parte, portanto o kernel de bordas de soma zero cancela o alfa uniforme junto com a cor uniforme. O resultado desapareceu no arquivo de teste examinado. Definir `preserveAlpha="true"` mantém o alfa de origem enquanto processa a cor. A [referência de preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) documenta a distinção. Para este teste, ela restaura uma prévia opaca de bordas. Também mantém o papel opaco e o centro branco opacos, embora sua cor filtrada se torne preta. Preservar alfa não remove um fundo nem encontra furos em um logotipo. Se a prévia é quase toda preta, compare primeiro uma área uniforme conhecida com um limite conhecido. Preto pode ser uma resposta zero válida. Para examinar mudanças de brilho com sinal em torno de um tom médio, tente `bias="0.5"`; a [referência de bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) explica o deslocamento somado após a divisão. Isso muda a faixa de exibição, não a geometria do SVG. ## Confira as bordas separadamente da arte Mantenha `edgeMode="duplicate"` na comparação inicial. Ele estende os valores dos pixels de borda quando as amostras vizinhas ficam fora da entrada. `none` usa amostras RGBA de valor zero; `wrap` pega amostras da borda oposta. São regras distintas na [referência de edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode). No nosso cartão branco opaco, mudar só `duplicate` para `none` produziu uma moldura clara na parte externa do cartão. Esse limite pertence ao retângulo da imagem, não ao losango. Compare o arquivo sem filtro antes de tratar uma moldura como contorno da arte. A [especificação Filter Effects](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) define o alvo do kernel e o comportamento de amostragem. Aqui, `targetX="1"` e `targetY="1"` centralizam o kernel 3 × 3. Este exemplo não define `kernelUnitLength`. Não presuma que uma amostra vizinha sempre abrange uma unidade de usuário SVG em qualquer tamanho de exibição; examine a renderização entregue. ## Use a nitidez como controle, não para recuperar desfoque Para manter a arte preenchida e enfatizar mudanças locais, substitua apenas `kernelMatrix` por: ```text 0 -1 0 -1 5 -1 0 -1 0 ``` A soma é 1. Um valor de canal uniforme `c` retorna `5c - 4c = c` com divisor 1 e bias 0. No nosso arquivo de teste, a amostra cinza sólida ficou em 64, enquanto os pixels de limite mudaram. Mantenha `preserveAlpha="true"` e `edgeMode="duplicate"` para esta comparação. O aumento de nitidez pode enfatizar ruído e halos junto com limites úteis. Não recupera detalhes de origem perdidos antes de a imagem chegar ao filtro. Se uma prévia ampliada parecer ruim, volte à imagem original em vez de tratar um kernel mais forte como substituto da resolução de origem. ## Examine o arquivo antes de chamá-lo de traçado vetorial O exemplo publicado contém um `` cujo `href` começa com `data:image/png`. A [referência do elemento image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) descreve recursos raster e SVG que esse elemento pode exibir. Aqui o tipo de mídia identifica o raster incorporado; o filtro de bordas mantém esse elemento no lugar. Para comparação, o original criado de forma independente usa este caminho composto sobre um retângulo branco: ```xml ``` Essas coordenadas foram escritas separadamente. Não foram recuperadas da imagem filtrada, e o desenho em pixels e o controle geométrico não precisam corresponder em toda amostra do limite. O [guia de inspeção de raster incorporado](https://perfectvector.com/pt-BR/blog/svg-contains-raster-image) explica como conferir um SVG misto sem depender só do zoom. Para arte web, mantenha o original SVG sem filtro e use uma cópia filtrada de exibição quando o efeito servir ao design. Para edição ou caminhos de produção, examine os contornos reais de origem e a abertura interna. O [guia de arte de linhas para SVG](https://perfectvector.com/pt-BR/blog/line-art-to-svg) cobre essa tarefa de geometria. O PerfectVector se encaixa quando a arte inicial é um PNG ou JPG plano e você precisa de formas de origem editáveis. [Converta a imagem original em SVG](https://perfectvector.com/pt-BR/image-to-vector), examine o contorno e a abertura interna e mantenha o resultado limpo como original mestre. Uma prévia de bordas bem-sucedida não substitui essa verificação. O [guia de vetorização](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) explica a diferença entre reconstruir caminhos e aplicar um efeito de imagem. ## Perguntas frequentes **A detecção de bordas SVG feConvolveMatrix cria caminhos vetoriais?** Não. Ela calcula um efeito de pixels renderizado. O PNG incorporado deste exemplo continua sendo um elemento de imagem; contornos editáveis exigem geometria desenhada ou traçada separadamente. **Por que meu filtro de bordas faz a arte desaparecer?** Confira preserveAlpha. O padrão false também filtra alfa. Neste arquivo opaco, o kernel de soma zero tornou transparente o resultado examinado. Preservar alfa restaurou uma prévia opaca. **preserveAlpha remove o fundo branco?** Não. Ele mantém o alfa de origem. Um fundo branco opaco continua opaco mesmo quando sua cor filtrada se torna preta. Remoção de fundo e reconstrução de caminhos são tarefas separadas. **Por que um filtro de bordas desenha uma moldura ao redor da imagem?** Examine edgeMode e o retângulo de entrada. Usar amostras de valor zero fora do nosso cartão branco opaco criou uma borda externa clara. O tratamento de borda duplicada evitou essa borda neste arquivo de teste. ## Fontes 1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — convolução da vizinhança de pixels e processamento padrão de cor. 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — normalização e padrão de soma zero. 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — definição e aplicação de um efeito de filtro. 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — processamento só de cor ou incluindo alfa. 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — deslocamento da resposta após a divisão. 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — tratamento de bordas por duplicação, repetição e zero. 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — regras de alvo e amostragem. 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — conteúdo de imagem raster e SVG referenciado. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-convolution-edge-preview) - [Ícones SVG no MapLibre: pixels e tamanho do símbolo](https://perfectvector.com/pt-BR/blog/maplibre-svg-symbol-image.md) - [Logos SVG no Satori: preserve a arte no cartão da marca](https://perfectvector.com/pt-BR/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)