Beispiel:SVG-Filter-Vergleich.svg

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 320 200" width="320" height="200">
  <defs>
    <style>
       rect {
          fill: yellow; 
          stroke: red;
          stroke-width: 5px;
       }
       rect.blurred {
          filter: blur(3px);
       }
       text {
          text-anchor: middle;
          fill: black;
       }
    </style>
    <filter id="soft-3">
      <feGaussianBlur stdDeviation="3" />
    </filter>
  </defs>
  <g transform="translate(0 0)">
    <rect x="10" y="10"  width="140" height="80" />
    <text x="80" y="30"  >kein Filter</text>
  </g>
  <g transform="translate(160 0)">  
    <rect x="10" y="10" width="140" height="80" class="blurred" />
    <text x="80" y="30">filter im CSS</text>          
    <text x="80" y="50">blur()</text>
  </g>
  
  <g transform="translate(0 100)" filter=" url(#gray)">
    <rect x="10" y="10" width="140" height="80" filter="url(#soft-3)" />
    <text x="80" y="30">Filter-Attribut</text>                      
    <text x="80" y="50">&lt;feGaussianBlur&gt;</text>
  </g>
  <g transform="translate(160 100)">
    <rect x="10" y="10" width="140" height="80" filter="blur(3px)" />
    <text x="80" y="30">Filter-Attribut</text>
    <text x="80" y="50">blur()</text>
  </g>
</svg>