IE까지 고려해야되서 참조한 코드를 코딩스타일에 맞게 일부 수정하여 적용했는데 어떻게 하면 IE에서 Blur가 되지 않고 어떻게 하면 크롬에서 Blur가 되지 않아 체크해봄.

<div class="blurImage">
  <svg>
    <image x="0" y="0" id="blurImage<%= i %><%= j %>" width="781" height="430" xlink:href="<%= b.image %>" />
    <filter id="blurEffect<%= i %><%= j %>">
      <fegaussianblur stddeviation="2" />
    </filter>
  </svg> 
</div>

.blurImage {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 45px;
    overflow: hidden;

    svg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 781px;
        height: 430px;

        @for $i from 0 through 9 {
            @for $j from 0 through 9 {
                #blurImage#{$i}#{$j} {
                    filter: url("#blurEffect#{$i}#{$j}");
                }
            }
        }
    }
}

SVG에서

IE : x, y, width, height 속성이 없으면 IE에서 실행 안됨.
Chrome : / 닫는 슬래쉬가 없으면 크롬에서 실행 안됨.