Detecção de bordas SVG: prévia com feConvolveMatrix

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 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:

-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 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.

<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>

A definição do filtro só tem efeito porque a imagem a referencia com filter="url(#effect)". A referência de filter SVG 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.

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

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 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 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.

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 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:

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 <image> cujo href começa com data:image/png. A referência do elemento 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:

<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>

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 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 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, 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 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 — convolução da vizinhança de pixels e processamento padrão de cor.
2. MDN: divisor — normalização e padrão de soma zero.
3. MDN: filter — definição e aplicação de um efeito de filtro.
4. MDN: preserveAlpha — processamento só de cor ou incluindo alfa.
5. MDN: bias — deslocamento da resposta após a divisão.
6. MDN: edgeMode — tratamento de bordas por duplicação, repetição e zero.
7. W3C: Filter Effects, feConvolveMatrix — regras de alvo e amostragem.
8. MDN: image — conteúdo de imagem raster e SVG referenciado.