SVG Filters Tutorial

Filters 

SVG allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the results of different filters. With the filter element <filter> it is possible to add these effects and later on attach them to an object.

Filters act like layers. When creating them, try applying and testing the effect step by step.

This element has different attributes that help us create the clipping region. Between the filter tags, we can define the primitives that allow us to implement the desired effect. One of these primitives is the feGaussianBlur. The keyword SourceAlpha identifies the input for this primitive, is in this case input 'in'. The amount of blur to be applied is done using the stdDeviation attribute.

SVG filter example

<defs>
  <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
  </filter>
</defs>

<g id="ghost" style="filter: url(#drop-shadow);"/>
 <!--Ghost drawing in here-->
</g>

This above example will not produced the desired output. Instead we need to add more filter primitives which will produce the desire rendering. By adding feoffset and result, the effect layer is defined

<result> attribute is a reference that can be use later. It is quite different to an XML id and only can be referenced within the actual filter. <feoffset> primitive has the blur result from the Gaussian blur. <feMerge> primitive contains the nodes <feMergeNode> taking as inpiut the result offsetBlur , this will allow it to appear below the  sourceGraphic

Implementation of more primitives

<defs>
 <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feoffset in="blur" dx="4" dy="4" result="offsetBlur"/>
 </filter>
 <feMerge>
   <feMergeNode in="offsetBlur"/>
   <feMergeNode in="SourceGraphic"/>
 </feMerge>
</defs> 

 

Document Tags and Contributors

 Contributors to this page: teoli, curacao
 Last updated by: teoli,