Filters

Code

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120">
  <defs>
    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
    <filter id="shadow">
      <feDropShadow dx="4" dy="4" stdDeviation="3" flood-opacity="0.5"/>
    </filter>
  </defs>
  <circle cx="50" cy="60" r="30" fill="red" filter="url(#blur)"/>
  <rect x="100" y="30" width="60" height="60" fill="blue" filter="url(#shadow)"/>
</svg>

Explanation

SVG filters chain primitive operations inside a filter element referenced by url(#id). feGaussianBlur softens the source graphic by a standard deviation, and feDropShadow is a convenience primitive for offset shadows. The filter region (x, y, width, height) must be large enough to contain the effect or it will be clipped.

More SVG Snippets