Mapas de desplazamiento SVG: distorsiona tu logotipo

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 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

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

Para cambiar solo el color de la vista previa, usa la recoloración con 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.

<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 aporta variación procedimental. La referencia de ruido de MDN 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 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:

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

La especificación de desplazamiento del W3C 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:

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 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:

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

Mantén la primitiva de desplazamiento, los selectores y el sRGB explícito en el filtro. La referencia de feFlood de MDN 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.

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 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 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 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 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 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 — Entradas de origen y mapa, canales y comportamiento del muestreo.
2. W3C: Filtro de desplazamiento — Mapeo inverso, escala y coordenadas de primitivas.
3. MDN: feTurbulence — Controles fijos del mapa procedimental.
4. MDN: feColorMatrix — Valores explícitos de los canales del mapa de control.
5. MDN: color-interpolation-filters — linearRGB predeterminado y sRGB explícito.
6. MDN: feFlood — Control con mapa de color constante.
7. MDN: filter — Atributos de la región del filtro.

Si el original limpio solo existe como ráster, convierte tu logotipo a SVG, revisa su silueta y sus huecos, y guarda ese maestro antes de crear una copia de visualización distorsionada por separado.