feGaussianBlur-2.svg

Enable keyboard shortcuts

Checkerboard

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">

<!-- It's unfortunately hard to reftest the extent of the blur. We can at

     least make sure it paints *something* -->

<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">

  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>

</filter>

<g filter="url(#f1)">

  <rect x="100" y="100" width="100" height="100" fill="#00ff00"/>

</g>

<!-- the radius affected by the box-blur is bounded by 3 times the standard

     deviation -->

<rect x="0" y="0" width="300" height="130" fill="#ffffff"/>

<rect x="0" y="130" width="130" height="40" fill="#ffffff"/>

<rect x="170" y="130" width="130" height="40" fill="#ffffff"/>

<rect x="0" y="170" width="300" height="130" fill="#ffffff"/>

<!-- we can test whether the blur is a reasonable size by bumping up

     non-zero alpha values a lot -->

<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse">

  <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>

  <feComponentTransfer>

    <feFuncA type="linear" slope="1000"/>

  </feComponentTransfer>

</filter>

<g filter="url(#f2)">

  <rect x="100" y="400" width="100" height="100" fill="#00ff00"/>

</g>

<!-- there should be nonzero alpha values everywhere within 1 standard

      deviation of the original image -->

<rect x="0" y="300" width="300" height="90" fill="#ffffff"/>

<rect x="0" y="390" width="90" height="120" fill="#ffffff"/>

<rect x="210" y="390" width="90" height="120" fill="#ffffff"/>

<rect x="0" y="510" width="300" height="90" fill="#ffffff"/>

</svg>