Na terceira parte da série, você aprenderá como o feComponentTransfer funciona e como poderá posterizar imagens usando este poderoso filtro SVG primitivo.

A série de artigos proposta, "SVG Filtering Effects", de Sara Soueidan, desenvolvedora de interface UI / UX freelancer e autora de muitos artigos técnicos com base no Líbano, concentra-se no trabalho de filtros SVG e consiste nos seguintes artigos:

Efeitos de filtragem SVG

1. Efeitos de filtragem SVG. Parte 1. Filtros SVG 101
2. Efeitos de filtragem SVG. Parte 2. Texto de estrutura de tópicos com feMorphology
3. Efeitos de filtragem SVG. Parte 3. Efeito de posterização de imagem usando feComponentTransfer
4. Efeitos de filtro SVG: imagens em tom duplo com feComponentTransfer .
5. Efeitos de filtro SVG: conforme o texto na textura da superfície com feDisplacementMap

Este artigo pressupõe que você já esteja familiarizado com os princípios básicos dos filtros SVG ou que leu o primeiro artigo desta série - "Filtros SVG 101". Se você não tiver feito isso, fique à vontade para gastar alguns minutos para preencher sua base de conhecimento.

feComponentTransfer é uma das primitivas de filtro SVG mais poderosas. Isso nos dá controle sobre os canais RGBA individuais de nossa fonte gráfica, permitindo criar efeitos como o Photoshop em SVG. Neste artigo, que é a primeira parte do artigo sobre feComponentTransfer , conheceremos essa primitiva e veremos como ela pode ser usada para posterizar imagens.

A posterização ou o espessamento de uma imagem envolve a conversão de uma transição contínua de cores em vários intervalos de menos cores, com transições nítidas de uma cor para outra. Isso foi feito inicialmente usando processos fotográficos para criar pôsteres. - Wikipedia .

A posterização ocorre em toda a imagem, mas é mais óbvia na área de uma mudança de cor sutil.

Fig_1. Um exemplo de fotografia em formato JPEG (cores de 24 bits ou 16,7 milhões de cores) antes da posterização, contrastando com o resultado de sua economia no formato GIF (256 cores). (Fonte: Wikipedia)

Neste artigo, usaremos feComponentTransfer para reduzir o número de cores na imagem, o que, por sua vez, criará um bom efeito de pôster, semelhante ao que vemos nos designs de pôster comercial ou gráfico.

Fig_2. A aplicação do efeito de posterização à imagem à esquerda com feComponentTransfer reduz o número de cores nessa imagem (direita).

Mas primeiro, considere o básico técnico ...

Visão geral do FeComponentTransfer

A primitiva feComponentTransfer permite alterar cada um dos componentes R , G , B e A presentes em um pixel. Em outras palavras, feComponentTransfer permite manipular independentemente cada canal de cores da mesma maneira que o canal alfa na entrada de gráficos. Permite controlar com precisão o ajuste de brilho, ajuste de contraste, equilíbrio de cores ou configuração de limite.

Os componentes RGBA são modificados executando as funções de transferência desses componentes. Para isso, cada componente possui seu próprio elemento chamado Transfer Function Element . Ao longo do artigo, vou me referir a esses elementos como " elementos componentes " - ou seja, Elementos relacionados a componentes RGBA individuais. Esses elementos estão aninhados em feComponentTransfer . Portanto, o feComponentTransfer não faz nada além de colocar elementos individuais de componentes RGB. Os elementos do componente RGBA são: feFuncR , feFuncG , feFuncB e feFuncA .

O atributo type é usado no elemento component para determinar o tipo de função que você deseja usar para modificar este componente. Atualmente, existem cinco tipos de funções: identidade , tabela , discreta , linear e gama . Esses tipos de funções são usadas para modificar os componentes da fonte gráfica R / G / B / A. Veremos a maioria deles nesta série e veremos como eles podem ser usados.

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

Para cada tipo de função, há um ou mais atributos que permitem especificar informações adicionais sobre a função usada. Por exemplo, uma função linear tem o atributo slope , que é usado para indicar a inclinação da função linear que será usada para alterar o componente ao qual é aplicada.

Você pode alterar um ou mais componentes ao mesmo tempo . Isso significa que feComponentTransfer pode conter um, dois, três ou todos os elementos componentes ao mesmo tempo. Você também pode mudar de canal independentemente um do outro, aplicando funções diferentes a cada elemento do componente.

A capacidade de usar várias funções em diferentes elementos componentes significa que você tem um controle muito grande sobre as cores da fonte gráfica no nível mais baixo de pixel. Por exemplo, você pode alterar os canais vermelho e azul combinando-os com duas novas cores e deixar o verde inalterado ou apenas aumentar sua intensidade. Esse gerenciamento de componentes de baixo nível significa que você pode aplicar recursos como o Photoshop a imagens em seu navegador usando algumas linhas de código. Não sei você, mas o designer (iniciante) em mim acha isso super interessante!

Exemplo: usando um componente alfa para reduzir a opacidade de um objeto

Um exemplo simples da vida real é o uso do elemento componente feFuncA para reduzir a opacidade da fonte gráfica. No primeiro artigo desta série, vimos como o feColorMatrix pode ser usado para reduzir a opacidade de um elemento, alterando o valor do canal alfa na matriz de cores. Pessoalmente, prefiro usar feComponentTransfer para esse tipo de trabalho.

A aplicação do seguinte filtro a uma fonte reduz a opacidade dessa fonte para 0,5:

 <filter id="redOp"> <feComponentTransfer> <feFuncA type="table" tableValues="0 0.5"></feFuncA> </feComponentTransfer> </filter> 

Mencionamos acima que temos cinco funções diferentes que podemos usar para controlar componentes RGBA. O tipo da função de tabela funciona combinando os valores do componente, que é o canal alfa em nosso exemplo, com a série de valores fornecidos pelo atributo tableValues .

Então, o que isso significa?

O canal alfa de um elemento geralmente está no intervalo [0, 1]. Usando a função de tabela e fornecendo dois valores: 0 e 0,5, basicamente dizemos ao navegador para mapear o intervalo alfa [0, 1] para o novo intervalo: [0, 0,5]. Nesse caso, a opacidade é reduzida pela metade.

Vamos considerar um exemplo mais detalhado da função de tabela no próximo artigo. Agora, quero esclarecer o tipo de função discreta . Então, vamos ver como funciona e o que podemos fazer com isso.

Efeito de posterização de imagem: reduzindo o número de cores em uma imagem usando a função discreta

A função discreta é usada para reduzir o número de cores em uma imagem ou componente se apenas um componente for usado. Reduzir o número de cores na imagem significa que, em vez de uma mudança linear suave da cor, você verá transições de cores mais nítidas que fazem a imagem parecer listras ou grupos de cores, o que leva a um efeito que se parece com um pôster.

Fig_3. A imagem à direita é uma cópia da imagem à esquerda, à qual uma função discreta foi aplicada para reduzir o número de cores nela para 5 por componente.

Na figura acima, você pode ver que, em vez de transições suaves, as cores mudam drasticamente, criando barras e conjuntos de cores, e a imagem parece mais "posterizada".

Pessoalmente, a função discreta me lembra as funções de sincronização steps () no CSS. Comparada a uma função linear, uma função passo a passo se move de um valor para outro, em vez de se mover linearmente entre eles.

Como a função de tabela , a função discreta recebe uma série de valores, conforme especificado no atributo tableValues . A função discreta difere da tabela na maneira como usa esses valores.

Usando tableValues , você fornece ao navegador uma lista finita de valores com os quais ele deve mapear o componente de cor. E como você fornece uma lista finita de valores, obtém um número finito de cores, criando assim barras e aglomerados de cores que, de outra forma, seriam transições lineares de cores.

Essa função é determinada pelas etapas da função especificadas no atributo tableValues , que fornece uma lista de n valores para identificar a função da etapa de n etapas .— Especificação de filtros SVG

Vamos ver o que isso significa em termos simples. Suponha que tenhamos o seguinte fragmento de código:

 <svg width="500" height="335" viewBox="0 0 500 335"> <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 .5 1" /> </feComponentTransfer> </filter> <image xlink:href="..."cwidth="100%" height="100%" x="0" y="0" filter="url(#posterize)"></image> </svg> 

No fragmento de código acima, usamos uma função discreta para alterar o canal vermelho na fonte da imagem. Fornecemos três valores diferentes aos quais o navegador deve corresponder aos valores em vermelho. No filtro SVG, os valores dos componentes são representados como frações no intervalo [0, 1]. Isso significa que o valor do componente vermelho em qualquer pixel pode ser 0 (0% vermelho / completamente preto), 1 (100% vermelho) ou qualquer valor (tom de vermelho) entre eles. O mesmo vale para os canais verde, azul e alfa.

Para qualquer número de ( n ) valores digitados, o navegador criará n intervalos. Mais especificamente, ele dividirá [0, 1] em n intervalos. Em seguida, ele exibirá os valores de cores que estão dentro desses intervalos por n valores. Aplique esta lógica ao nosso snippet de código:

• o navegador vê três valores vermelhos diferentes em tableValues ;
• divide os valores vermelhos no intervalo [0, 1] em três partes iguais. Portanto, nossos três intervalos são os seguintes:
  
  • [0,33]
  • [0,33, 0,66]
  • [0,66, 1]
• Além disso, o navegador verifica o valor vermelho de cada pixel na imagem e determina em qual intervalo ele está localizado;
• todos os valores vermelhos de um intervalo são exibidos com o novo valor associado a esse intervalo daqueles que você forneceu. A exibição é a seguinte:
  
  • as cores no intervalo [0, 0,33] são exibidas como 0;
  • as cores no intervalo [0,33, 0,66] são exibidas como 0,5;
  • as cores no intervalo [0,66, 1] são exibidas como 1.

Você também pode pensar nesse processo como ativar ou desativar tons de cores. Ao fornecer valores discretos para uma cor, você informa ao navegador que apenas esses valores serão incluídos e se o pixel contiver um valor que não seja igual a um deles, deverá ser desativado e substituído por um dos permitidos. Assim, por exemplo, o valor da cor de 0,8 é considerado desativado e será substituído por 1 (porque esse valor está no terceiro intervalo).

A seguir, uma ilustração desenhada à mão dessa tela colorida, que eu pintei quando pensei nisso. Talvez você seja útil.

Fig_4. Mapeando valores de cores para variar a cor.

Quando o navegador passa por todos os pixels da imagem, você substitui um grande número de valores em vermelho pelo pequeno número selecionado em tableValues , substituindo assim alterações de cores suaves por transições nítidas, e a imagem parece feita com clusters ou listras de cor.

A seguir, é apresentada uma demonstração da aplicação do snippet de código acima a uma imagem com muito vermelho. Ao limitar o número de vermelhos em pixels de uma imagem e zerar os vermelhos em alguns deles, a imagem exibe uma diminuição geral perceptível no vermelho, especialmente na parte inferior da imagem:

Alterar o número de valores discretos e / ou alterar os próprios valores alterará o resultado geral. Você pode não querer atribuir o valor de cor 0 para se livrar de algumas áreas pretas da imagem. Por exemplo, na imagem do céu acima, provavelmente, não deve haver aglomerados ou faixas de preto na versão da posterização da imagem, porque ainda é uma imagem do céu. Para fazer isso, você precisa ter mais de duas ou três cores, caso contrário, a imagem perderá a maior parte da imagem.

Para criar esse efeito, limitei o número de cores RGB a cinco, começando com o valor mais baixo de 0,25:

 <filter id="posterize"> <feComponentTransfer> <feFuncR type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncG type="discrete" tableValues=".25 .4 .5 .75 1" /> <feFuncB type="discrete" tableValues=".25 .4 .5 .75 1" /> </feComponentTransfer> </filter> 

Você pode jogar com o efeito na seguinte demonstração:

Conclusão

Espero que este artigo tenha ajudado a esclarecer um pouco o feComponentTransfer e tenha mostrado o quão poderoso é o controle de pixels e cores de componentes.

No próximo artigo, veremos dois tipos mais poderosos da função de transferência feComponentTransfer . Veremos como você pode simular o efeito de uma imagem do Photoshop em dois tons e como você pode controlar o brilho, o contraste e a intensidade da cor de uma imagem usando feComponentTransfer . Fique conosco.