Filters allow you to apply a variety of effects to elements or groups of elements. Filters allow you to blur images, apply lighting effects, and many other advanced image manipulation techniques. If you've ever used Adobe Photoshop or other graphics manipulation programs, these filters are just like the filters you've seen in that environment.
Filters are implemented in the defs
section of the SVG document and are grouped as part of a filter
element. They are referenced the same way that mask
and clipPath
elements are, via a fragment URL. The following example shows the common Gaussian blur filter applied to a circle:
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"> <filter id="blurIsm"> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter> <circle cx="75" cy="75" r="50" fill="red"/> <circle cx="200" cy="75" r="50" fill="red" filter="url(#blurIsm)"/> </svg>
Rendered in...