Limiar alfa em SVG: corte rígido na transparência

Para um corte alfa em 0.5, use feComponentTransfer com <feFuncA type="discrete" tableValues="0 1"/>. O alfa de entrada abaixo de 0.5 se torna transparente; o alfa igual ou acima desse valor se torna opaco. Omita as funções RGB quando quiser que seus mapeamentos de transferência mantenham a identidade.

Esse filtro muda o alfa renderizado, não a estrutura da arte subjacente. Ele não remove um fundo branco opaco, pois pixels brancos com alfa 1 passam pelo mesmo corte que pixels coloridos opacos. Um PNG incorporado ao SVG também continua sendo uma imagem raster.

Compare pixels de origem conhecidos antes de escolher um limiar

Criamos um pequeno PNG RGBA de 8 bits com uma mudança gradual de alfa, uma abertura quadrada transparente, uma área branca opaca e seis amostras controladas. Cada SVG deste teste incorpora os mesmos bytes PNG em um único elemento image. As variantes sem filtro, discrete e table com interpolação diferem apenas na configuração do filtro.

O padrão quadriculado abaixo pertence à página ao redor, fora do SVG. Ele revela a transparência, sem fingir fazer parte do canal alfa da imagem.

Nossa página carregou as variantes SVG reais, desenhou-as em um canvas do navegador e amostrou o interior das seis amostras. Os bytes alfa de saída foram:

Os valores alfa normalizados são esses bytes divididos por 255. Assim, 127/255 está ligeiramente abaixo de 0.5, enquanto 128/255 está ligeiramente acima. Essas amostras ficam em lados opostos do corte matemático; um byte PNG de 8 bits não representa exatamente 0.5.

A abertura de origem apresentou alfa 0 em todas as versões. A área branca apresentou 255 em todas as versões. Essas são observações deste exemplo controlado, não uma afirmação de que qualquer arte manterá todos os detalhes desejados após a aplicação do limiar.

Aplique a transferência ao alfa

O filtro essencial é curto:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

Aplique-o à imagem com filter="url(#alpha)". A região de filtro desta amostra cobre toda a origem e a viewport de 320 por 240. Use limites adequados à sua arte em vez de copiar essas dimensões para um arquivo sem relação com o exemplo.

A referência de feFuncA no MDN identifica esse elemento como a função de transferência alfa dentro de feComponentTransfer. A referência de transferência de componentes descreve o remapeamento por canal e os cálculos com valores de cor não pré-multiplicados.

A especificação atual Filter Effects atribui um mapeamento de identidade às funções de canal não especificadas. Nossa marcação omite feFuncR, feFuncG e feFuncB; ela muda apenas a função de transferência alfa. Isso não significa que as cores visíveis sobre um fundo pareçam idênticas: mudar o alfa muda sua aparência após a composição.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

O exemplo completo mantém os bytes PNG. O filtro não recolore o arquivo de origem armazenado nem o substitui por traçados. O diagnóstico de raster incorporado explica por que a extensão externa .svg não comprova geometria vetorial.

Diferencie um degrau de uma tabela interpolada

Os dois tipos de transferência usam tableValues, mas interpretam as entradas de formas diferentes. A referência de type lista as funções de transferência disponíveis; a referência de tableValues descreve a lista de consulta.

Para discrete, cada entrada ocupa um intervalo igual de entrada. Com as duas entradas 0 1, o primeiro intervalo é 0 ≤ A < 0.5, e o segundo é 0.5 ≤ A ≤ 1. A saída salta entre os dois valores.

Para table, as entradas são extremos de regiões de interpolação linear. Com 0 1, a interpolação mapeia cada alfa de entrada para ele mesmo. É uma transferência de identidade, razão pela qual nossa coluna table amostrada coincide com a coluna sem filtro.

As fórmulas de intervalo da especificação também explicam estas alternativas documentadas:

Nossa captura testa os casos discrete e table com duas entradas. As linhas de quatro entradas descrevem os mapeamentos da especificação; não são variantes adicionais de arte medidas. Escolha type deliberadamente, em vez de presumir que uma lista contendo apenas zeros e uns necessariamente produzirá um limiar binário.

Separe o alfa de entrada da opacidade posterior

Forneça ao filtro o alfa real da origem. Em nosso exemplo, esse alfa é armazenado nos pixels PNG. Para um teste vetorial, use o alfa de um preenchimento ou fill-opacity antes de aplicar o filtro.

O modelo de composição de Filter Effects aplica filtros antes da opacidade. Uma opacidade geral no elemento ou em um grupo ao redor pode, portanto, reduzir o resultado renderizado após o filtro. Se você aplicar um limiar à origem e depois compuser o resultado com opacidade menor, ele poderá parecer translúcido novamente. Deixe essa opacidade posterior fora de um teste controlado de limiar.

Um corte rígido também descarta a transição semitransparente da origem. Pixels tênues desaparecem, e pixels translúcidos mantidos se tornam totalmente opacos. Isso pode remover um brilho suave ou uma borda fina que você pretendia manter. Inspecione o resultado no tamanho de destino e sobre mais de um fundo. Um alfa de saída binário não garante que a borda final exibida esteja livre de efeitos de amostragem ou composição.

Se a translucidez fizer parte do design, mantenha-a ou use uma transferência gradual em vez de forçar um corte. Para uma máscara de visibilidade propositalmente monocromática, o guia de máscaras CSS com SVG aborda um fluxo de apresentação diferente.

Branco opaco exige outro diagnóstico

A área branca permanece porque seu alfa é totalmente opaco. Essa operação seleciona pelo alfa, não por um pixel parecer branco. Pixels de fundo totalmente opacos não se tornam transparentes com este mapeamento discrete 0 1.

Se o arquivo contiver um fundo branco indesejado, primeiro determine se ele é uma forma SVG separada ou parte de uma imagem raster. Exclua ou edite diretamente uma forma vetorial de fundo indesejada. Para um PNG com branco incorporado aos pixels, limpe a origem raster antes da recuperação ou use um fluxo adequado de remoção de fundo. O guia de SVG com fundo transparente explica esses casos.

Leve em conta as partes realmente brancas do objeto antes de remover um fundo por cor. Este filtro alfa não consegue inferir qual região branca é fundo e qual pertence à arte, nem restaurar informações de cor perdidas quando a origem foi achatada.

Prepare um raster transparente antes da recuperação vetorial

O PerfectVector pode ajudar quando o design final existe apenas em raster e você precisa de geometria SVG. Primeiro prepare um PNG com transparência real e depois converta o PNG em SVG. Compare a prévia sobre um fundo contrastante, inspecione a silhueta e as aberturas e verifique se o arquivo baixado contém geometria de fundo indesejada.

Nosso exemplo de filtro é um experimento de exibição. Ele não envia um SVG filtrado para vetorização nem demonstra um novo resultado traçado. Se você precisar manter uma aparência raster com limiar aplicado, prepare e verifique uma cópia raster real para entrega em seu editor antes de considerar a recuperação vetorial. Inspecione o alfa dessa cópia em vez de depender da prévia no navegador.

Use diretamente um original vetorial disponível. Preserve a semitransparência quando ela transmitir informações úteis do design e redesenhe um símbolo simples quando isso for mais fácil de manter. A visão geral da vetorização de imagens separa a reconstrução raster da mudança de apresentação de um SVG existente.

Perguntas frequentes

Qual corte alfa discrete tableValues 0 1 usa? O alfa de entrada abaixo de 0.5 é mapeado para 0; o alfa igual ou acima de 0.5 é mapeado para 1. Nas amostras PNG de 8 bits testadas, o byte 127 se torna transparente e o byte 128 se torna opaco.

Por que tableValues 0 1 não muda minha transparência? Com type table, essas entradas definem uma interpolação linear de 0 a 1, que é identidade. Use type discrete para o mapeamento de dois degraus mostrado aqui.

Isso remove o branco ou transforma um PNG em traçados vetoriais? Não. O branco totalmente opaco passa por esse corte alfa. Nossas variantes SVG ainda contêm o mesmo PNG em um único elemento image e zero traçados; a limpeza de fundo e a reconstrução vetorial são tarefas separadas.

Fontes

1. W3C — Filter Effects Level 1 — Define padrões de identidade, transferência de canais não pré-multiplicados e fórmulas dos intervalos table e discrete.
2. MDN — feComponentTransfer — Explica o remapeamento de canais realizado pela primitiva de filtro.
3. MDN — feFuncA — Identifica a função de transferência do canal alfa.
4. MDN — type — Lista os tipos de função de transferência de componentes e seu contexto de atributos.
5. MDN — tableValues — Descreve as entradas de consulta usadas pelas transferências table e discrete.

Precisa de geometria vetorial a partir de um design raster? Prepare e converta um PNG transparente, inspecione a silhueta e as aberturas da prévia e verifique o SVG baixado sobre um fundo colorido.