> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Mapas de deslocamento SVG: distorça a prévia do logo
> Use feDisplacementMap para deformar a prévia de um logo, controlar canais e cinza neutro em sRGB, conferir dois tamanhos e manter o original em caminhos para entrega.
Source: https://perfectvector.com/pt-BR/blog/svg-fedisplacementmap-artwork
Language: pt-BR
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) 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
| Objetivo | Abordagem adequada | O que manter |
| ---------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------ |
| Arte distorcida estática em uma página web | Uma cópia de exibição com filtro | Original mestre de caminhos SVG |
| Logotipo editável com contornos permanentemente deformados | Editar ou reconstruir deliberadamente a geometria | Nova geometria de caminhos verificada |
| Prévia raster com aparência fixa | Renderizar a cópia de exibição no tamanho necessário | Original limpo e exportação raster examinada |
| Geometria de produção para impressão ou corte | Começar pelo original sem filtro | Dimensões, vazios e caminhos testados no destino |
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**
*Ilustração: o emblema visível pode se distorcer enquanto o contorno de origem permanece inalterado. Este diagrama conceitual não é uma captura de navegador, exportação de editor nativo ou resultado de conversão.*
Para uma mudança de prévia apenas na cor, use a [recoloração com feColorMatrix](https://perfectvector.com/pt-BR/blog/svg-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`.
```xml
```
`feTurbulence` fornece variação procedural. A [referência de ruído da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) 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:
```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```
A [especificação de deslocamento do W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) 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:
| Valor do canal no espaço de cor de trabalho do filtro | Deslocamento horizontal de amostragem |
| ----------------------------------------------------- | ------------------------------------- |
| `0` | `-18` |
| `0.5` | `0` |
| `1` | `+18` |
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) 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:
```xml
```
Mantenha a primitiva de deslocamento, os seletores e o `sRGB` explícito no filtro. A [referência de feFlood da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) 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`.
| Intensidade | Arquivo de teste original observado | Decisão que apoia |
| ----------- | ------------------------------------------------------------------ | ----------------------------------------- |
| `0` | Bordas externas retas e abertura quadrada | Referência para comparação |
| `12` | Variação horizontal suave do contorno; abertura permaneceu visível | Tratamento visual discreto |
| `36` | Distorção mais forte da borda externa e da abertura | Examine o reconhecimento antes da entrega |
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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) 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](https://perfectvector.com/pt-BR/blog/svg-shadow-clipped) 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](https://perfectvector.com/pt-BR/blog/svg-contains-raster-image) 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](https://perfectvector.com/pt-BR/vectorize-logo) 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](https://perfectvector.com/pt-BR/blog/how-to-vectorize-a-logo) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Entradas de origem e mapa, canais e comportamento de amostragem.
2. [W3C: Filtro de deslocamento](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Mapeamento inverso, escala e coordenadas das primitivas.
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Controles do mapa procedural fixo.
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Valores explícitos de canal do mapa de controle.
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB padrão e sRGB explícito.
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Controle de mapa de cor constante.
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atributos da região do filtro.
Se o original limpo existe só como raster, [converta seu próprio logotipo em SVG](https://perfectvector.com/pt-BR/vectorize-logo), confira sua silhueta e vazios e salve esse original antes de criar uma cópia separada de exibição distorcida.
## Explore
- [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-fedisplacementmap-artwork)
- [Image Trace desativado no Illustrator: veja o objeto](https://perfectvector.com/pt-BR/blog/illustrator-image-trace-greyed-out.md)
- [Imagens SVG no fpdf2: traçados no PDF em Python](https://perfectvector.com/pt-BR/blog/fpdf2-svg-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)