SVG scale Attribute

Last Updated : 31 Mar, 2022

The scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive. Only <feDisplacementMap> element is using this attribute.

Syntax:

scale = "number"

Attribute Values: The scale attribute accepts the values mentioned above and described below

number: It is either an integer or a number with a fractional component. The default value is equal to 0.

The below examples illustrate the use of the scale attribute.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;  
             margin-left: 50px;"> 
  
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="geek1" x="-20%" y="-20%" 
                width="150%" height="150%"> 
                  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.10" 
                    numOctaves="2" 
                    result="turbulence" /> 
  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="5" /> 
            </filter> 
              
            <polygon points="50, 9 60.5, 39.5 92.7, 
                40.1 67, 59.5 76.4, 90.3 50, 71.9  
                23.6, 90.3 32.9, 59.5 7.2, 40.1  
                39.4,39.5" style="filter: url(#geek1);"
                fill="hsl(106,80%,50%)" /> 
        </svg> 
    </div> 
</body> 
  
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;  
             margin-left: 50px;"> 
  
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="geek2" x="-20%" y="-20%" 
                width="150%" height="150%"> 
                  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.05" 
                    numOctaves="2" 
                    result="turbulence" /> 
  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="20" /> 
            </filter> 
  
            <polygon points="50, 9 60.5, 39.5 92.7, 
                40.1 67, 59.5 76.4, 90.3 50, 71.9  
                23.6, 90.3 32.9, 59.5 7.2, 40.1  
                39.4, 39.5" style="filter: url(#geek2);"
                fill="hsl(106,80%,50%)" /> 
        </svg> 
    </div> 
</body> 
  
</html> 