Mapas de deslocamento SVG: distorça a prévia do logo

Um filtro SVG feDisplacementMap distorce a imagem exibida pelo renderizador usando outra imagem como mapa de amostragem. Ele mantém os dados dos caminhos de origem inalterados. Use-o para uma prévia reversível de logotipo ou uma ilustração para a web e mantenha um original mestre sem filtro para edição e entrega.

Para um primeiro exemplo previsível, defina in="SourceGraphic", escolha um mapa nomeado para in2, especifique os canais horizontal e vertical e defina color-interpolation-filters="sRGB". A referência de deslocamento da MDN explica as duas entradas e a fórmula de amostragem. Uma forma que parece curva na tela não é automaticamente um novo contorno editável.

Decida de qual arquivo você precisa

O exemplo abaixo usa um emblema quadrado original com centro aberto. Suas bordas retas facilitam comparar a distorção. É um motivo de demonstração, não um logotipo de cliente nem uma saída de vetorizador.

Prévia e origem são separadas

Para uma mudança de prévia apenas na cor, use a recoloração com feColorMatrix. O deslocamento responde a um problema espacial: onde a imagem renderizada é amostrada.

Copie um exemplo SVG estático e controlado

Salve este código como SVG e abra em um navegador. Ele contém um caminho, uma fonte fixa de ruído, uma matriz que mantém o canal horizontal variável e o canal vertical neutro e uma escala de deslocamento de 36.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence fornece variação procedural. A referência de ruído da MDN documenta seus controles de frequência, oitava, semente e tipo. Mantemos esses valores fixos aqui para que mudar scale compare a intensidade com o mesmo mapa.

A matriz mantém o canal vermelho do ruído, define verde como 0.5, azul como zero e alfa como um. Sua saída é um mapa de controle, não uma nova paleta de cores para o emblema coral. A referência de matriz da MDN explica a transformação dos canais. O vermelho passa a controlar a amostragem horizontal, enquanto o verde contribui com um deslocamento vertical neutro.

Para comparar intensidades, mude somente scale="36" para scale="12" e depois scale="0". Mantenha caminho, semente, matriz do mapa, espaço de cor e viewBox inalterados. Isso isola a decisão que você está tomando.

Entenda a escala como deslocamento de amostragem

Para os canais selecionados do mapa, as posições de amostragem da origem são:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

A especificação de deslocamento do W3C define esse mapeamento inverso: cada posição de saída pergunta onde amostrar a origem. Um deslocamento positivo de amostragem não é uma instrução para mover um nó do caminho naquela direção.

Na escala 36, o canal horizontal fornece estes deslocamentos de amostragem:

O exemplo usa primitiveUnits="userSpaceOnUse", portanto esses valores se referem ao sistema de coordenadas de usuário do SVG. Não são distâncias garantidas em pixels CSS depois de redimensionar o viewBox. A especificação também define a escala 0 como sem efeito de deslocamento.

O valor verde fixo mantém a amostragem vertical neutra neste exemplo. Para explorar depois a distorção em dois eixos, forneça deliberadamente variação no verde também. Não mude os canais e o mapa ao mesmo tempo ao diagnosticar um resultado inesperado.

Explicite o espaço de cor do cinza neutro

Neutro significa um valor de canal selecionado de 0.5 no espaço de trabalho usado pelo mapa. Não significa que toda amostra visualmente cinza médio seja neutra em qualquer configuração de filtro.

O espaço de trabalho padrão do filtro é linearRGB, enquanto este exemplo usa explicitamente sRGB. Uma cor escrita como rgb(50%,50%,50%) não é numericamente 0.5 depois da conversão para RGB linear. A referência de color-interpolation-filters da MDN documenta o padrão e as escolhas explícitas.

Para um mapa constante de diagnóstico, substitua a primitiva de ruído e a matriz por:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Mantenha a primitiva de deslocamento, os seletores e o sRGB explícito no filtro. A referência de feFlood da MDN documenta a imagem de cor constante usada aqui. Esse controle ajuda a distinguir a variação do mapa de uma mudança de espaço de cor.

No nosso arquivo de teste no Chrome, o emblema com mapa constante em sRGB parecia alinhado ao emblema sem filtro. Remover a configuração explícita de espaço de cor fez o mesmo emblema de mapa cinza se deslocar visivelmente. É uma observação no navegador, não uma afirmação de renderização idêntica em pixels entre mecanismos. Mantenha o espaço de cor ao levar esta receita para sua arte e confira regras CSS que possam sobrescrevê-lo.

Examine o mesmo emblema em dois tamanhos

Renderizamos o emblema original a 120 × 120 e 300 × 300 pixels CSS no Chrome. Cada tamanho mostrou o mesmo mapa fixo nas escalas 0, 12 e 36, usando o mesmo viewBox 0 0 200 200.

O efeito era visível nos dois tamanhos; a prévia maior facilitava examinar o furo e as bordas. O DOM do navegador ainda continha um caminho em cada um dos seis exemplos, com valores d idênticos. Três controles adicionais de 200 pixels compararam um emblema sem filtro com mapas cinza constantes em sRGB explícito e linearRGB padrão.

São exemplos SVG criados de forma independente. Eles estabelecem o que esse arquivo fez no navegador testado e que sua geometria de origem não mudou. Não são testes em editor nativo, saídas do PerfectVector ou um levantamento de compatibilidade.

Para seu próprio logotipo, examine primeiro o menor tamanho real de exibição. Uma abertura ou um canto distorcido pode mudar a leitura da marca mesmo que o original limpo continue intacto.

Diagnostique deslocamento, efeito fraco ou borda cortada

O emblema inteiro se desloca em vez de se curvar. Teste o controle de mapa constante com sRGB explícito. Confira os canais selecionados e se o mapa realmente varia neles. Um valor selecionado constante e não neutro cria um deslocamento uniforme de amostragem.

O efeito continua fraco. Confirme que in2="map" corresponde ao result nomeado da matriz. Aumente a escala aos poucos com a mesma semente e frequência. Depois, se necessário, tente outro mapa. Uma nova semente muda o padrão espacial, portanto é uma comparação separada.

A borda vertical se comporta de maneira inesperada. Este exemplo foi projetado para deslocamento horizontal: xChannelSelector="R" e yChannelSelector="G", com G fixo em 0.5. Confira a linha da matriz e a grafia dos canais antes de acrescentar variação em dois eixos.

O contorno deformado é cortado. Examine a região do filtro antes de editar o caminho de origem. O exemplo dá espaço extra com x="-25%", y="-25%" e largura e altura de 150%. A referência de filter da MDN documenta esses atributos de região. Efeitos mais extremos podem exigir outra região, e uma viewport ao redor pode impor um limite separado. Siga as verificações de recorte de filtro e viewport SVG se ampliar a região não resolver a saída ausente.

O SVG perde o efeito em outro destino. Abra exatamente o arquivo entregue nesse destino. Uma prévia no navegador não estabelece o comportamento de um editor, exportador PDF ou máquina de corte. Mantenha o original limpo disponível em vez de prometer que o filtro será transportado sem mudanças.

Entregue o original limpo separadamente

Para uma versão sem filtro, remova filter="url(#warp)" do caminho e remova a definição de filtro sem uso. Mantenha o d original, fill-rule="evenodd", preenchimento e viewBox. Abra o arquivo resultante e confirme que a abertura quadrada e as bordas retas correspondem à referência limpa.

Use nomes de arquivo separados para o original limpo e o tratamento visual. Se repetir o SVG filtrado inline em uma página, dê a cada filtro um ID único e atualize sua referência url(#...). Examine o método final de incorporação e os navegadores que pretende suportar.

Se o contorno final distorcido em si precisar ser editável, prepare essa geometria como uma tarefa separada de arte. Este filtro não incorpora a prévia em novos comandos de caminho. Traçar uma prévia rasterizada também é uma nova conversão, com verificações próprias de precisão e limpeza; não recupera o original matematicamente inalterado.

Um PNG colocado dentro de um SVG é outra distinção inteiramente diferente. Veja arquivos SVG que contêm imagens raster antes de supor que o nome do arquivo garante caminhos editáveis de logotipo.

Quando a vetorização de logotipo ajuda

Se o logotipo limpo original só existe como PNG ou JPG, vetorize esse logotipo de origem e examine sua silhueta, vazios e regiões de cor editáveis antes de acrescentar um filtro de exibição. O PerfectVector cuida da conversão de raster para vetor; o grafo de deslocamento deste guia é um tratamento SVG separado. Ele não transforma a prévia distorcida em um contorno de produção garantido.

Se você já tem o original mestre em caminhos, use esse arquivo diretamente. Para preparação da origem e limpeza do logotipo, o guia de vetorização de logotipos cobre a recuperação, em vez da distorção no navegador.

Perguntas frequentes

feDisplacementMap muda meus caminhos SVG? Esse filtro muda a imagem renderizada por meio de amostragem guiada por mapa. No arquivo de teste original no navegador, os seis exemplos de intensidade mantiveram um caminho com valores d idênticos.

Por que um mapa de deslocamento cinza ainda move minha arte? Neutro é um valor de canal de 0.5 no espaço de cor de trabalho do mapa. Um cinza de 50% em sRGB não é numericamente 0.5 depois de convertido para o espaço linearRGB padrão. Use uma configuração explícita de espaço de cor e um teste controlado com mapa constante.

O que significa escala 36 neste exemplo? Com unidades de primitiva userSpaceOnUse, valores de canal selecionado de 0 a 1 fornecem deslocamentos de amostragem de -18 a +18 unidades de usuário SVG. A distância exibida depende do redimensionamento do viewBox SVG.

Posso entregar o SVG distorcido diretamente a uma máquina de corte? A distorção exibida não é uma nova geometria de corte editável. Mantenha um original de caminhos sem filtro e examine o destino real; prepare contornos permanentemente deformados separadamente se o trabalho exigir.

Fontes

1. MDN: feDisplacementMap — Entradas de origem e mapa, canais e comportamento de amostragem.
2. W3C: Filtro de deslocamento — Mapeamento inverso, escala e coordenadas das primitivas.
3. MDN: feTurbulence — Controles do mapa procedural fixo.
4. MDN: feColorMatrix — Valores explícitos de canal do mapa de controle.
5. MDN: color-interpolation-filters — linearRGB padrão e sRGB explícito.
6. MDN: feFlood — Controle de mapa de cor constante.
7. MDN: filter — Atributos da região do filtro.

Se o original limpo existe só como raster, converta seu próprio logotipo em SVG, confira sua silhueta e vazios e salve esse original antes de criar uma cópia separada de exibição distorcida.