W3cubDocs

/SVG

scale

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The scale attribute defines the displacement scale factor to be used on a <feDisplacementMap> filter primitive. The amount is expressed in the coordinate system established by the primitiveUnits attribute on the <filter> element.

You can use this attribute with the following SVG elements:

<feDisplacementMap>

Example

<svg viewBox="0 0 480 220" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" />
  </filter>
  <filter id="displacementFilter2" x="-20%" y="-20%" width="140%" height="140%">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.05"
      numOctaves="2"
      result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" />
  </filter>

  <circle cx="100" cy="100" r="80" filter="url(#displacementFilter)" />
  <circle cx="340" cy="100" r="80" filter="url(#displacementFilter2)" />
</svg>

Usage notes

Value	`<number>`
Default value	None
Animatable	Yes

<number>

This value defines the scale factor for the displacement.

When the value of this attribute is 0, this operation has no effect on the source image.

Specifications

Specification
Filter Effects Module Level 1> # element-attrdef-fedisplacementmap-scale>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`scale`	5	12	3	15	6	18	4	14	6	1.0	4.4	6

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/scale