> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Mapas de desplazamiento SVG: distorsiona tu logotipo
> Usa feDisplacementMap de SVG para deformar una vista previa del logotipo, controlar canales y gris neutro en sRGB, revisar dos tamaños y conservar el maestro de trazados para la entrega.
Source: https://perfectvector.com/es/blog/svg-fedisplacementmap-artwork
Language: es
Author: Irene Kim
Published: 2026-10-01T08:00:00+09:00
Updated: 2026-10-01T08:00:00+09:00
Un filtro SVG `feDisplacementMap` distorsiona la imagen que muestra el renderizador utilizando otra imagen como mapa de muestreo. Los datos de tus trazados de origen no cambian. Úsalo para una vista previa reversible de un logotipo o una ilustración web, y conserva un maestro sin filtro para editar y entregar.
Para que el primer ejemplo sea predecible, establece `in="SourceGraphic"`, elige un mapa con nombre para `in2`, especifica los canales horizontal y vertical, y establece `color-interpolation-filters="sRGB"`. La [referencia de desplazamiento de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) explica las dos entradas y la fórmula de muestreo. Una forma que parece curvada en pantalla no se convierte automáticamente en un nuevo contorno editable.
## Decide qué archivo necesitas
| Objetivo | Método adecuado | Qué conservar |
| ---------------------------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------- |
| Diseño distorsionado estático en una página web | Una copia de visualización con filtro | Maestro original de trazados SVG |
| Logotipo editable con contornos deformados permanentemente | Editar o reconstruir deliberadamente la geometría | Nueva geometría de trazados verificada |
| Vista previa ráster con apariencia fija | Renderizar la copia de visualización al tamaño requerido | Maestro limpio y exportación ráster revisada |
| Geometría de producción para impresión o corte | Partir del maestro sin filtro | Dimensiones, huecos y trazados probados en el destino |
El siguiente ejemplo usa una insignia cuadrada original con el centro abierto. Sus bordes rectos facilitan comparar la distorsión. Es un motivo de demostración, no el logotipo de un cliente ni el resultado de un vectorizador.
**La vista previa y el origen son distintos**
*Ilustración: la insignia visible puede distorsionarse mientras el contorno de origen permanece igual. Este diagrama conceptual no es una captura de navegador, una exportación de un editor nativo ni un resultado de conversión.*
Para cambiar solo el color de la vista previa, usa la [recoloración con feColorMatrix](https://perfectvector.com/es/blog/svg-fecolormatrix). El desplazamiento responde a un problema espacial: dónde se toman las muestras de la imagen renderizada.
## Copia un ejemplo SVG estático y controlado
Guarda este código como SVG y ábrelo en un navegador. Contiene un trazado, una fuente de ruido fija, una matriz que mantiene variable el canal horizontal y neutro el vertical, y una escala de desplazamiento de `36`.
```xml
```
`feTurbulence` aporta variación procedimental. La [referencia de ruido de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) documenta sus controles de frecuencia, octavas, semilla y tipo. Aquí mantenemos fijos esos valores para que cambiar `scale` permita comparar la intensidad con el mismo mapa.
La matriz conserva el canal rojo del ruido, fija el verde en `0.5`, el azul en cero y el alfa en uno. Su salida es un mapa de control, no una nueva paleta de colores para la insignia coral. La [referencia de matrices de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) explica la transformación de canales. El rojo controla después el muestreo horizontal, mientras que el verde aporta un desplazamiento vertical neutro.
Para comparar intensidades, cambia únicamente `scale="36"` por `scale="12"` y después por `scale="0"`. Mantén sin cambios el trazado, la semilla, la matriz del mapa, el espacio de color y el viewBox. Así aíslas la decisión que estás tomando.
## Interpreta la escala como un desplazamiento del muestreo
Para los canales seleccionados del mapa, las posiciones de muestreo del origen son:
```text
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)
```
La [especificación de desplazamiento del W3C](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) define este mapeo inverso: cada posición de salida pregunta dónde tomar la muestra del origen. Un desplazamiento de muestreo positivo no es una instrucción para mover un nodo del trazado en esa dirección.
Con una escala de `36`, el canal horizontal produce estos desplazamientos de muestreo:
| Valor del canal en el espacio de color de trabajo del filtro | Desplazamiento horizontal de muestreo |
| ------------------------------------------------------------ | ------------------------------------- |
| `0` | `-18` |
| `0.5` | `0` |
| `1` | `+18` |
El ejemplo usa `primitiveUnits="userSpaceOnUse"`, así que estos valores se refieren al sistema de coordenadas de usuario del SVG. No garantizan distancias en píxeles CSS después de escalar el viewBox. La especificación también define que una escala de `0` no produce ningún efecto de desplazamiento.
El valor verde fijo mantiene neutro el muestreo vertical en este ejemplo. Para explorar después una distorsión en dos ejes, introduce deliberadamente variación en el verde también. No cambies a la vez los canales y el mapa cuando diagnostiques un resultado inesperado.
## Define el gris neutro con un espacio de color explícito
Neutro significa un valor de canal seleccionado de **0.5 en el espacio de trabajo utilizado para el mapa**. No significa que cualquier muestra visualmente gris medio sea neutra con cualquier configuración del filtro.
El espacio de trabajo predeterminado del filtro es `linearRGB`, mientras que este ejemplo utiliza explícitamente `sRGB`. Un color escrito como `rgb(50%,50%,50%)` no vale numéricamente 0.5 después de convertirse a RGB lineal. La [referencia de color-interpolation-filters de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) documenta el valor predeterminado y las opciones explícitas.
Para obtener un mapa constante de diagnóstico, sustituye la primitiva de ruido y la matriz por:
```xml
```
Mantén la primitiva de desplazamiento, los selectores y el `sRGB` explícito en el filtro. La [referencia de feFlood de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) documenta la imagen de color constante utilizada aquí. Este control permite distinguir la variación del mapa de un cambio provocado por el espacio de color.
En nuestro archivo de prueba de Chrome, la insignia con mapa constante en sRGB parecía alineada con la insignia sin filtro. Al eliminar el ajuste explícito del espacio de color, la misma insignia con mapa gris se desplazó de forma visible. Es una observación del navegador, no una afirmación de renderizado idéntico píxel a píxel en todos los motores. Mantén el ajuste del espacio de color al trasladar esta receta a tu diseño y comprueba si hay reglas CSS que lo sobrescriban.
## Revisa la misma insignia en dos tamaños
Renderizamos la insignia original a **120 × 120** y **300 × 300 píxeles CSS** en Chrome. Cada tamaño mostraba el mismo mapa fijo con escalas `0`, `12` y `36`, usando el mismo viewBox `0 0 200 200`.
| Intensidad | Observación del archivo de prueba original | Decisión que permite tomar |
| ---------- | ------------------------------------------------------------------ | ----------------------------------------------------- |
| `0` | Bordes exteriores rectos y abertura cuadrada | Referencia para comparar |
| `12` | Variación horizontal leve del contorno; la abertura seguía visible | Un tratamiento visual moderado |
| `36` | Mayor distorsión del borde exterior y la abertura | Revisar que siga siendo reconocible antes de entregar |
El efecto era visible en ambos tamaños; la vista previa más grande facilitaba inspeccionar el hueco y los bordes. El DOM del navegador seguía conteniendo un trazado en cada una de las seis muestras, con valores `d` idénticos. Otros tres controles de 200 píxeles comparaban una insignia sin filtro con mapas grises constantes en sRGB explícito y linearRGB predeterminado.
Son muestras SVG creadas de manera independiente. Establecen qué hizo este archivo de prueba en el navegador probado y que su geometría de origen no cambió. No son pruebas en editores nativos, resultados de PerfectVector ni un estudio de compatibilidad.
Para tu propio logotipo, revisa primero el tamaño real de visualización más pequeño. Una abertura o una esquina distorsionadas pueden cambiar cómo se interpreta la marca aunque el maestro limpio siga intacto.
## Diagnostica un desplazamiento, un efecto débil o un borde recortado
**Toda la insignia se desplaza en vez de deformarse.** Prueba el control de mapa constante con sRGB explícito. Revisa los canales seleccionados y si el mapa realmente varía en ellos. Un valor seleccionado constante que no sea neutro crea un desplazamiento de muestreo uniforme.
**El efecto sigue siendo débil.** Confirma que `in2="map"` coincida con el `result` con nombre de la matriz. Aumenta la escala gradualmente manteniendo la misma semilla y frecuencia. Después, si hace falta, prueba otro mapa. Una nueva semilla cambia el patrón espacial, así que es una comparación separada.
**El borde vertical se comporta de forma inesperada.** Este ejemplo está diseñado para desplazamiento horizontal: `xChannelSelector="R"` y `yChannelSelector="G"`, con G fijado en 0.5. Comprueba la fila de la matriz y la escritura del canal antes de añadir variación en dos ejes.
**El contorno deformado se recorta.** Revisa la región del filtro antes de editar el trazado de origen. El ejemplo añade espacio con `x="-25%"`, `y="-25%"` y ancho y alto de `150%`. La [referencia de filter de MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) documenta esos atributos de región. Los efectos más extremos pueden necesitar otra región, y el viewport que los rodea puede imponer un límite independiente. Sigue las [comprobaciones de recorte del filtro y del viewport SVG](https://perfectvector.com/es/blog/svg-shadow-clipped) si ampliar la región no resuelve la parte que falta.
**El SVG pierde el efecto en otro destino.** Abre el archivo exacto entregado en ese destino. Una vista previa de navegador no establece el comportamiento de un editor, un exportador PDF o una cortadora. Conserva el maestro limpio disponible en lugar de prometer que el filtro se mantendrá sin cambios.
## Entrega el maestro limpio por separado
Para una versión sin filtro, elimina `filter="url(#warp)"` del trazado y la definición del filtro que ya no se usa. Conserva el `d` original, `fill-rule="evenodd"`, el relleno y el viewBox. Abre el archivo resultante y confirma que la abertura cuadrada y los bordes rectos coincidan con la referencia limpia.
Usa nombres de archivo distintos para el maestro limpio y el tratamiento visual. Si repites el SVG con filtro de forma inline en una página, da a cada filtro un ID único y actualiza su referencia `url(#...)`. Revisa el método de inserción final y los navegadores que quieras admitir.
Si el propio contorno distorsionado final debe ser editable, prepara esa geometría como una tarea de diseño separada. Este filtro no convierte la vista previa en nuevos comandos de trazado. Calcar una vista previa rasterizada también es una nueva conversión con sus propias comprobaciones de precisión y limpieza; no recupera el maestro original que matemáticamente no ha cambiado.
Un PNG colocado dentro de un SVG es otra cuestión completamente distinta. Consulta [los archivos SVG que contienen imágenes ráster](https://perfectvector.com/es/blog/svg-contains-raster-image) antes de suponer que el nombre del archivo garantiza trazados de logotipo editables.
## Cuándo ayuda la vectorización de logotipos
Si tu logotipo original limpio solo se conserva como PNG o JPG, [vectoriza ese logotipo de origen](https://perfectvector.com/es/vectorize-logo) y revisa su silueta, sus huecos y sus regiones de color editables antes de añadir un filtro visual. PerfectVector realiza la conversión de ráster a vector; el grafo de desplazamiento de esta guía es un tratamiento SVG separado. No convierte la vista previa distorsionada en un contorno de producción garantizado.
Si ya tienes el maestro de trazados limpio, usa ese archivo directamente. Para preparar el origen y limpiar el logotipo, la [guía de vectorización de logotipos](https://perfectvector.com/es/blog/how-to-vectorize-a-logo) cubre la recuperación en lugar de la distorsión en el navegador.
## Preguntas frecuentes
**¿feDisplacementMap cambia mis trazados SVG?**
Este filtro cambia la imagen renderizada mediante muestreo guiado por un mapa. En el archivo de prueba original del navegador, las seis muestras de intensidad conservaron un trazado con valores d idénticos.
**¿Por qué un mapa de desplazamiento gris sigue moviendo mi diseño?**
Neutro es un valor de canal de 0.5 en el espacio de color de trabajo del mapa. Un gris sRGB del 50% no vale numéricamente 0.5 después de convertirse al espacio linearRGB predeterminado. Usa un ajuste explícito del espacio de color y una prueba controlada con mapa constante.
**¿Qué significa una escala de 36 en este ejemplo?**
Con unidades de primitiva userSpaceOnUse, los valores de canal seleccionados de 0 a 1 producen desplazamientos de muestreo de -18 a +18 unidades de usuario SVG. La distancia mostrada depende de la escala del viewBox del SVG.
**¿Puedo enviar directamente el SVG distorsionado a una cortadora?**
La distorsión mostrada no es nueva geometría de corte editable. Conserva un maestro de trazados sin filtro e inspecciona el destino real; prepara por separado contornos deformados permanentes si el trabajo los requiere.
## Fuentes
1. [MDN: feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap) — Entradas de origen y mapa, canales y comportamiento del muestreo.
2. [W3C: Filtro de desplazamiento](https://drafts.csswg.org/filter-effects/#feDisplacementMapElement) — Mapeo inverso, escala y coordenadas de primitivas.
3. [MDN: feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence) — Controles fijos del mapa procedimental.
4. [MDN: feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix) — Valores explícitos de los canales del mapa de control.
5. [MDN: color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — linearRGB predeterminado y sRGB explícito.
6. [MDN: feFlood](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feFlood) — Control con mapa de color constante.
7. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — Atributos de la región del filtro.
Si el original limpio solo existe como ráster, [convierte tu logotipo a SVG](https://perfectvector.com/es/vectorize-logo), revisa su silueta y sus huecos, y guarda ese maestro antes de crear una copia de visualización distorsionada por separado.
## Explore
- [Read the HTML article](https://perfectvector.com/es/blog/svg-fedisplacementmap-artwork)
- [Calco de imagen desactivado en Illustrator: qué revisar](https://perfectvector.com/es/blog/illustrator-image-trace-greyed-out.md)
- [Imágenes SVG en fpdf2: conserva los trazados en tu PDF de Python](https://perfectvector.com/es/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)