Textura granulada SVG: mantenha o ruído dentro da arte

Para adicionar granulação a uma ilustração SVG, gere ruído com feTurbulence, transforme-o em uma sobreposição monocromática suave e componha essa sobreposição dentro de SourceAlpha. Mescle-a sobre SourceGraphic para manter o preenchimento original visível. Isso acrescenta uma textura renderizada e preserva a geometria dos caminhos da arte.

Uma primitiva de ruído sozinha dá outro resultado: preenche a sub-região da primitiva do filtro, em vez de seguir o contorno da forma. Por isso uma folha pode virar um retângulo de ruído. A referência de feTurbulence da MDN documenta esse comportamento.

Para uma ilustração web, as entregas úteis são uma versão texturizada para exibição e um original limpo. A granulação produzida por esse filtro não é uma coleção de pontos editáveis ou contornos de corte.

Separe a forma do tratamento da superfície

Comece com um caminho preenchido simples que já fique bom sem granulação. Corrija seu contorno, aberturas e cor antes de adicionar o efeito. Um filtro não repara essa geometria.

Os três estados abaixo explicam o problema dos limites:

O limite importa

SourceGraphic fornece o elemento filtrado. SourceAlpha fornece seu canal alfa. O filtro atua sobre uma imagem da arte; não reescreve os comandos do caminho. Essas entradas e o grafo do filtro são definidos na especificação Filter Effects do W3C.

Se sua arte inicial já tem áreas transparentes, elas também afetam a contenção. SourceAlpha segue a opacidade renderizada real, não uma caixa delimitadora externa presumida.

Copie um exemplo completo de granulação SVG

Salve como arquivo .svg e abra em um navegador. Ele contém um caminho original de folha, uma semente de ruído determinística, uma sobreposição escura e a etapa explícita de contenção. A abertura diagonal faz parte do caminho, portanto continua transparente na versão texturizada.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

O filtro tem quatro tarefas:

1. feTurbulence cria o ruído e o nomeia noise.
2. A matriz define vermelho, verde e azul como zero. Sua última linha multiplica o alfa do ruído por 0.28, criando uma sobreposição preta suave chamada ink.
3. feComposite com operator="in" mantém essa sobreposição onde existe SourceAlpha.
4. feMerge desenha primeiro a arte original e depois a sobreposição contida acima dela.

A referência de feColorMatrix da MDN explica como a matriz de cinco colunas transforma cor e alfa. Aqui ela muda a imagem de ruído, não o preenchimento da folha. A referência de feComposite da MDN explica a operação in usada para restringir a sobreposição à segunda entrada.

O valor 0.28 é um ponto de partida para esta folha coral, não uma configuração universal de granulação. Diminua se a textura apagar a vivacidade da arte; aumente se a granulação desaparecer no tamanho de exibição pretendido. Granulação de sobreposição preta escurece o preenchimento. Ela não cria pontos claros visíveis em um motivo preto.

Para operações de cor e alfa usadas para recolorir arte existente, veja o guia separado de feColorMatrix. Para tornar mais firme uma borda transparente existente, veja limiares alfa SVG. Nenhuma dessas operações fornece a origem de ruído gerado usada aqui.

Confira o resultado no tamanho em que será visto

Criamos três versões deste caminho original: sem filtro, com um filtro contendo só a primitiva de ruído e com o grafo completo de granulação contida acima. Examinamos as versões renderizadas no Chrome a 120 × 120 e 360 × 360 pixels CSS, com o mesmo viewBox 0 0 200 200.

O DOM do navegador continha um caminho em cada exemplo. Os seis atributos d eram idênticos. Isso estabelece o limite deste exemplo: a superfície renderizada mudou e nenhum caminho de ponto foi adicionado. É um arquivo de teste criado para navegador, não uma saída do PerfectVector ou de um editor vetorial nativo.

Uma prévia maior ajuda a examinar o efeito, mas a versão menor determina se a arte ainda é legível. Mantenha os dois tamanhos na revisão. Aumentar o tamanho de exibição com o mesmo viewBox também muda a escala aparente da textura; não presuma que uma prévia representa todos os usos.

Ajuste a granulação com um controle por vez

Para uma ilustração pequena em um cartão web, comece pelos valores do exemplo. Depois mude um parâmetro, compare os mesmos dois tamanhos e guarde uma cópia da versão preferida.

baseFrequency aceita um valor para os dois eixos ou dois valores para frequência horizontal e vertical. A referência de baseFrequency da MDN documenta a distinção. Comece com um valor para esta folha; valores desiguais são uma escolha deliberada para textura direcional.

numOctaves controla o número de oitavas do ruído, como descreve a referência de numOctaves da MDN. Oitavas extras não são caminhos vetoriais extras. Use-as somente se melhorarem a superfície visível no tamanho necessário.

O exemplo define color-interpolation-filters="sRGB" explicitamente. Mantenha essa configuração inalterada ao comparar opções, para que uma mudança no processamento de cor não confunda a comparação de granulação.

Corrija um retângulo, preenchimento ausente ou borda suja

A textura cria um retângulo. Examine a saída final do filtro. Se terminar com feTurbulence, está retornando a imagem de ruído. Restaure a matriz, a composição com SourceAlpha e a mesclagem. Ampliar o retângulo do filtro só dá mais espaço ao ruído sem contenção.

A cor da folha desaparece. Confira se o primeiro nó de mesclagem usa SourceGraphic. Um resultado final só de inside contém a sobreposição escura, não o preenchimento coral original. Confira também a grafia e as maiúsculas de cada referência nomeada result e in.

O ruído permanece em uma abertura transparente. Confirme que a segunda entrada da composição é SourceAlpha, não o ruído retangular ou um fundo opaco. Aplique o filtro à arte que deseja texturizar. Incluir um fundo opaco no grupo filtrado muda a entrada alfa.

Parte da saída está cortada. Confira x, y, width e height no filtro. Eles definem a região disponível do filtro, como descreve a referência de filter da MDN. O exemplo oferece um espaço extra modesto. Uma região maior não repara uma etapa de contenção ausente nem corrige o recorte imposto por um contêiner separado.

A arte pequena parece suja. Reduza primeiro o alfa da sobreposição e compare frequência e número de oitavas. Se a textura ainda prejudicar a silhueta, entregue a versão limpa nesse tamanho.

Mantenha um original limpo para entrega

Para o original sem filtro, remova filter="url(#grain)" do caminho e exclua a definição de filtro que deixou de ser usada. Preserve o d do caminho, seu preenchimento e o viewBox. Abra esse arquivo separadamente e confirme que a folha e a abertura correspondem à versão limpa original.

Para um aplicativo web, confira a versão texturizada nos navegadores e no método exato de incorporação que você vai publicar. Se repetir este SVG inline em uma página, dê a cada filtro um ID único e atualize sua referência url(#...). O exemplo independente usa um ID porque contém uma instância.

Para um destino que exige aparência raster exata, exporte uma prévia raster no tamanho necessário e examine-a ali. Para um fluxo que precisa de geometria editável ou cortável, entregue os caminhos limpos e esclareça que a granulação é um efeito de exibição. Não descreva o ruído do filtro como pontos vetoriais nem prometa que um editor, exportador PDF ou máquina de corte posterior o reproduz. Teste o destino real.

Se você precisa deliberadamente de pontos editáveis individualmente, isso é uma tarefa separada de geometria. Também exige uma decisão de limpeza; veja por que um SVG tem nós demais antes de traçar textura em uma massa de contornos minúsculos. Preservar a granulação de uma pintura raster é outro problema inicial, tratado em aquarela para vetor.

Quando a vetorização ajuda

Se o motivo limpo só existe como PNG ou JPG, converta essa origem em arte SVG editável antes de acrescentar um filtro de navegador. Examine primeiro a silhueta e a abertura recuperadas na versão limpa. O PerfectVector fornece a etapa de raster para vetor; o grafo de granulação procedural deste guia é um tratamento SVG separado que você adiciona depois.

Já tem o original mestre em caminhos? Use-o diretamente. Uma segunda conversão é desnecessária para o trabalho do filtro. O guia de vetorização de imagens explica essa etapa de recuperação da origem, caso você precise dela.

Perguntas frequentes

Por que feTurbulence cria um retângulo em vez de seguir minha forma? O ruído preenche a sub-região da primitiva do filtro. Componha-o dentro de SourceAlpha e mescle sobre SourceGraphic para limitar a sobreposição à arte e preservar seu preenchimento.

A granulação SVG adiciona nós ao meu caminho? Este filtro não adiciona caminhos de pontos. No arquivo de teste original no navegador, os seis exemplos mantiveram um caminho com dados d idênticos; o filtro mudou a superfície renderizada.

Com quais configurações de granulação devo começar? Para a folha original do exemplo, comece com fractalNoise, baseFrequency 0.65, duas oitavas, seed 8 e multiplicador alfa da sobreposição preta de 0.28. Compare no tamanho real de exibição e ajuste uma configuração por vez.

Posso usar o efeito de granulação como arquivo de corte? A textura gerada não é geometria de corte editável. Mantenha um original separado de caminhos sem filtro e confira a geometria no fluxo de corte real.

Fontes

1. MDN: feTurbulence — Geração de ruído e sub-região da primitiva.
2. W3C: Árvore de primitivas do filtro — SourceGraphic, SourceAlpha e processamento de imagens por filtro.
3. MDN: feColorMatrix — Operações de matriz de cor e alfa.
4. MDN: feComposite — Contenção usando o operador in.
5. MDN: baseFrequency — Valores de frequência em um ou dois eixos.
6. MDN: numOctaves — Camadas de detalhe do ruído.
7. MDN: filter — Atributos da região do filtro.

Se sua ilustração web precisa recuperar um original limpo de raster, comece pela conversão de imagem para vetor, revise os caminhos e adicione granulação a uma cópia separada de exibição.