SVG Displacement Maps: Distort Your Logo Preview

An SVG feDisplacementMap filter distorts the image a renderer displays by using another image as a sampling map. It leaves your source path data unchanged. Use it for a reversible logo preview or web illustration, and keep an unfiltered master for editing and delivery.

For a predictable first example, set in="SourceGraphic", choose a named map for in2, specify the horizontal and vertical channels, and set color-interpolation-filters="sRGB". The MDN displacement reference explains the two inputs and the sampling formula. A shape that looks bent on screen is not automatically a new editable outline.

Decide which file you need

The example below uses an original square badge with an open center. Its straight edges make the distortion easy to compare. It is a demonstration motif, not a customer's logo or output from a vectorizer.

Preview and source are separate

For a color-only preview change, use feColorMatrix recoloring. Displacement answers a spatial problem: where the rendered image is sampled.

Copy a controlled, static SVG example

Save this code as an SVG and open it in a browser. It contains one path, one fixed noise source, a matrix that keeps the horizontal channel variable while holding the vertical channel neutral, and a displacement scale of 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 supplies procedural variation. The MDN noise reference documents its frequency, octave, seed and type controls. We keep those values fixed here so changing scale compares strength against the same map.

The matrix retains the noise's red channel, sets green to 0.5, sets blue to zero, and sets alpha to one. Its output is a control map, not a new color palette for the coral badge. The MDN matrix reference explains the channel transformation. Red then controls horizontal sampling, while green contributes a neutral vertical offset.

To compare strengths, change only scale="36" to scale="12" and then scale="0". Keep the path, seed, map matrix, color space and viewBox unchanged. This isolates the decision you are making.

Read scale as a sampling offset

For the selected map channels, the source sampling positions are:

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

The W3C displacement specification defines this inverse mapping: each output location asks where to sample the source. A positive sampling offset is not an instruction to move a path node in that direction.

At scale 36, the horizontal channel gives these sample offsets:

The example uses primitiveUnits="userSpaceOnUse", so these values refer to the SVG's user coordinate system. They are not guaranteed CSS pixel distances after the viewBox is scaled. The specification also defines scale 0 as having no displacement effect.

The fixed green value keeps vertical sampling neutral in this example. To explore two-axis distortion later, deliberately supply variation in green too. Do not change the channels and the map at the same time when diagnosing an unexpected result.

Make neutral gray explicit about color space

Neutral means a selected channel value of 0.5 in the working space used for the map. It does not mean every visually middle-gray swatch is neutral under every filter setting.

The default filter working space is linearRGB, while this example explicitly uses sRGB. A color written as rgb(50%,50%,50%) is not numerically 0.5 after conversion to linear RGB. The MDN color-interpolation-filters reference documents the default and the explicit choices.

For a diagnostic constant map, replace the noise primitive and matrix with:

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

Keep the displacement primitive, selectors and explicit sRGB on the filter. The MDN feFlood reference documents the constant-color image used here. This control helps distinguish map variation from a color-space shift.

In our Chrome fixture, the sRGB constant-map badge appeared aligned with the unfiltered badge. Removing the explicit color-space setting made the same gray-map badge visibly shift. That is a browser observation, not a claim of pixel-identical rendering across engines. Keep the color-space setting when you move this recipe to your own artwork; check for CSS rules that override it.

Inspect the same badge at two sizes

We rendered the original badge at 120 × 120 and 300 × 300 CSS pixels in Chrome. Each size showed the same fixed map at scales 0, 12, and 36, using the same 0 0 200 200 viewBox.

The effect was visible at both sizes; the larger preview made the hole and edges easier to inspect. The browser DOM still contained one path in each of the six specimens, with identical d values. Three additional 200-pixel controls compared an unfiltered badge with constant gray maps in explicit sRGB and default linearRGB.

These are independently authored SVG specimens. They establish what this fixture did in the tested browser and that its source geometry was unchanged. They are not native-editor tests, PerfectVector output, or a compatibility survey.

For your own logo, inspect the smallest actual display size first. A distorted opening or corner can change how the mark reads even though the clean master is still intact.

Diagnose a shift, weak effect, or cropped edge

The whole badge shifts instead of bending. Test the constant-map control with explicit sRGB. Check the selected channels and whether the map actually varies in them. A constant non-neutral selected value creates a uniform sampling offset.

The effect stays weak. Confirm in2="map" matches the matrix's named result. Increase scale gradually against the same seed and frequency. Then, if necessary, try a different map. A new seed changes the spatial pattern, so it is a separate comparison.

The vertical edge behaves unexpectedly. This example is designed for horizontal displacement: xChannelSelector="R" and yChannelSelector="G", with G fixed at 0.5. Check the matrix row and channel spelling before adding two-axis variation.

The warped contour is cut off. Inspect the filter region before editing the source path. The example supplies extra room with x="-25%", y="-25%", and 150% width and height. The MDN filter reference documents those region attributes. More extreme effects may need a different region, and a surrounding viewport can impose a separate boundary. Follow SVG filter and viewport clipping checks if enlarging the region does not resolve the missing output.

The SVG loses the effect in another destination. Open the exact delivered file in that destination. A browser preview does not establish the behavior of an editor, PDF exporter, or cutter. Keep the clean master available rather than promising that the filter travels unchanged.

Deliver the clean master separately

For an unfiltered version, remove filter="url(#warp)" from the path and remove the unused filter definition. Retain the original d, fill-rule="evenodd", fill, and viewBox. Open the resulting file and confirm the square opening and straight edges match the clean baseline.

Use separate filenames for the clean master and the display treatment. If you repeat the filtered SVG inline on one page, give each filter a unique ID and update its url(#...) reference. Inspect the final embedding method and browsers you intend to support.

If the final distorted outline itself must be editable, prepare that geometry as a separate artwork task. This filter does not bake the preview into new path commands. Tracing a rasterized preview is also a new conversion with its own accuracy and cleanup checks; it does not recover the original mathematically unchanged master.

A PNG placed inside an SVG is another distinction entirely. See SVG files that contain raster images before assuming the filename guarantees editable logo paths.

When logo vectorization helps

If your original clean logo survives only as a PNG or JPG, vectorize that source logo, then inspect its silhouette, holes and editable color regions before adding a display filter. PerfectVector handles raster-to-vector conversion; the displacement graph in this guide is a separate SVG treatment. It does not turn the distorted preview into a guaranteed production outline.

If you already have the clean path master, use that file directly. For source preparation and logo cleanup, the logo vectorization guide covers the recovery step rather than browser distortion.

FAQ

Does feDisplacementMap change my SVG paths? This filter changes the rendered image through map-driven sampling. In the original browser fixture, the six strength specimens retained one path with identical d values.

Why does a gray displacement map still move my artwork? Neutral is a channel value of 0.5 in the map's working color space. A 50% sRGB gray is not numerically 0.5 after conversion to the default linearRGB space. Use an explicit color-space setting and a controlled constant-map test.

What does scale 36 mean in this example? With userSpaceOnUse primitive units, selected channel values from 0 to 1 give sampling offsets from -18 to +18 SVG user units. The displayed distance depends on scaling the SVG viewBox.

Can I hand the distorted SVG straight to a cutter? The displayed distortion is not new editable cutting geometry. Retain an unfiltered path master and inspect the actual destination; prepare permanent warped contours separately if the job requires them.

Sources

1. MDN: feDisplacementMap — Source and map inputs, channels, and sampling behavior.
2. W3C: Displacement filter — Inverse mapping, scale, and primitive coordinates.
3. MDN: feTurbulence — Fixed procedural map controls.
4. MDN: feColorMatrix — Explicit control-map channel values.
5. MDN: color-interpolation-filters — Default linearRGB and explicit sRGB.
6. MDN: feFlood — Constant-color map control.
7. MDN: filter — Filter-region attributes.

If the clean original exists only as raster, convert your own logo into SVG, check its silhouette and holes, and save that master before making a separate distorted display copy.