stdDeviation
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The stdDeviation attribute defines the standard deviation for the blur operation.
You can use this attribute with the following SVG elements:
Example
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
<filter id="gaussianBlur1">
<feGaussianBlur stdDeviation="1" />
</filter>
<filter id="gaussianBlur2">
<feGaussianBlur stdDeviation="5" />
</filter>
<filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="10" />
</filter>
<circle cx="100" cy="100" r="50" filter="url(#gaussianBlur1)" />
<circle cx="240" cy="100" r="50" filter="url(#gaussianBlur2)" />
<circle cx="380" cy="100" r="50" filter="url(#gaussianBlur3)" />
</svg>
Usage notes
| Value |
<number-optional-number>
|
|---|---|
| Default value | 0 |
| Animatable | Yes |
<number-optional-number>-
If two numbers are provided, the first number represents a standard deviation value along the x-axis. The second value represents a standard deviation along the y-axis. If one number is provided, then that value is used for both X and Y.
A negative value is forbidden. A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image). If
stdDeviationis 0 in only one of X or Y, then the effect is that the blur is only applied in the direction that has a non-zero value.
Specifications
| Specification |
|---|
| Filter Effects Module Level 1 # element-attrdef-fegaussianblur-stddeviation |