SVG surfaceScale Attribute

Last Updated : 31 Mar, 2022

The surfaceScale attribute serve as the height of the surface. Elements that are using this attribute includes  <feSpecularLighting> and <feDiffuseLighting>

Syntax:

surfaceScale = "number"

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

  • number: This attribute value accepts  number such as a raw integer, a positive fraction, a negative fraction, zero, a fractional number without a leading zero, etc.

Note: Default attribute value is considered as 1.

Example 1: Below examples illustrate the use of surfaceScale attribute.

HTML 
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <p>
        value of surfaceScale = "1"
    </p>

    <svg viewBox="0 0 820 600" 
        xmlns="http://www.w3.org/2000/svg">
        
        <filter id="geek1" x="0" y="0" 
            width="100%" height="100%">
            
            <feDiffuseLighting surfaceScale="1">
                <fePointLight x="60" y="60" z="20" />
            </feDiffuseLighting>
        </filter>
        
        <rect width="150" height="150" 
            style="filter: url(#geek1);" />
    </svg>
</body>

</html>

Output:

Example 2:

HTML 
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <p>
        value of surfaceScale = "20"
    </p>

    <svg viewBox="0 0 820 600" 
        xmlns="http://www.w3.org/2000/svg">
        
        <filter id="geeks2" x="0" y="0" 
            width="100%" height="100%">
            
            <feDiffuseLighting in="SourceGraphic" 
                surfaceScale="20">

                <fePointLight x="60" y="60" z="20" />
            </feDiffuseLighting>
        </filter>
        
        <rect x="0" y="0" width="150" height="150" 
            style="filter: url(#geeks2);" />
    </svg>
</body>

</html>

Output:

Comment

Explore