SVG stdDeviation Attribute
Last Updated :
31 Mar, 2022
The stdDeviation attribute explains the standard deviation for the blur operation. Only <feGaussianBlur> element is using this attribute.
Syntax:
stdDeviation = <number-optional-number>
Attribute Values: The stdDeviation attribute accepts the values mentioned above and described below
- number-optional-number: It is a pair of numbers. The first number denotes the standard deviation value along the X-axis. The second value denotes the standard deviation value along the Y-axis. If only one value is given then it is considered as a standard deviation along both the axis.
Note: The default value for stdDeviation is 0.
Example 1: Below example illustrates the use of stdDeviation when its value is 1
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-10 10 680 400"
<filter id="geek1">
<feGaussianBlur stdDeviation="1" />
</filter>
<polygon points="50 15, 100 100, 0 100"
fill="green"
style="filter: url(#geek1);" />
</svg>
</body>
</html>
|
Output:
Example 2: Below example illustrates the use of stdDeviation when its value is 4.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-10 10 680 400"
<filter id="geek2">
<feGaussianBlur stdDeviation="4" />
</filter>
<polygon points="50 15, 100 100, 0 100"
fill="green"
style="filter: url(#geek2);" />
</svg>
</body>
</html>
|
Output:
Example 3: Below example illustrates the use of stdDeviation when its value is 8
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="-10 10 680 400"
<filter id="geek3" x="-30%" y="-30%"
width="160%" height="160%">
<feGaussianBlur stdDeviation="8" />
</filter>
<polygon points="50 15, 100 100, 0 100"
fill="green"
style="filter: url(#geek3);" />
</svg>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...