Как реализовать адаптивное размытие фона (responsive blur)?

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 2" />
    </filter>
  </defs>
</svg>

.block{
    filter: url(filter.svg#blur); /* FF, IE10 & Opera */
   -webkit-filter: blur(2px); /* Chrome */
}

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); /* IE8 */