Full version, Basic version

Specification link: 15.17 Filter primitive 'feGaussianBlur'

filters-felem-01-b ← index → filters-image-01-b

# filters-gauss-01-b
SVG Image | PNG Image
filters-gauss-01-b Blur an image $Revision: 1.6 $ |

In the upper left corner of the output are red and yellow rectangles that overlap, they appear normally, no gaussianBlur has been applied. In the upper right the same rectangles are displayed with a blur filter applied, the standard deviation is the same for both the x and y axis. In the lower right corner the rectangles appear again, this time the standard deviation is different along the x (20) and y (1) axis.

The rendered picture should match the reference image, except for possible variations in the labelling text (per CSS2 rules).

On top of the rectangles in the upper right and lower right, thin (half-pixel-wide) blue lines are drawn to show the outline of the object bounding box (the inside lines) and the outline of the filter region (the outside lines). The blur effect should be clipped to the bounds of the filter region.

The test uses the 'rect' element, as well as basic fill (solid primary colors), stroke (black 1-pixel and blue half-pixel lines), font-family (Arial) and font-size properties.

filters-felem-01-b ← index → filters-image-01-b