SVG에서는 backdrop-filter: blur() 같은 효과를 지원할까?

figma에서 이미지를 svg 확장자로 export했는데 두 반투명한 사각형 오브젝트가 겹친 이미지로, 두 오브젝트가 겹치는 부분은 뒷쪽 오브젝트가 blur 처리되어 보여야 하나, 실제 export된 결과물에서는 뒷쪽 사각형이 그대로 보이는 결과물이 나왔다.

원인

export한 svg 파일에서는 backdrop-filter: blur()를 feGaussianBlur를 이용하여 구현했다.

예시)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect x="10" y="10" width="100" height="100" style="fill:blue" />
    <circle cx="60" cy="60" r="50" style="fill:red; filter:url(#blurMe)" />
</svg>

문제는 feGaussianBlur는 svg 내의 지정된 해당 요소에 대해서만 blur 처리를 할 뿐 그 이외의 요소에 대해서는 영향을 주지 못한다. SVG 스펙 내부에는 이를 지원하는 기능이 없습니다. 이런 블러 효과를 적용하려면 HTML과 CSS에서 backdrop-filter를 사용하거나, SVG 자체를 두 번 렌더링하여 한 번은 블러 처리하고 한 번은 블러 처리하지 않은 레이어를 겹쳐서 보여주는 방식을 사용해야 한다.