Почему SVG-файл не добавляется в качестве фона через CSS-свойство background-image?

Я пытаюсь сделать размытие фонового изображения. Для этого в папку /img я положил растровый исходник (bg_seller_hub.jpeg) и создал SVG-файл, который должен применить к нему размытие:

    <svg width="1502" height="851" viewBox="0 0 1502 851">
        <defs>
            <filter id="bgBlur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
            </filter>
        </defs>
        <image xlink:href="bg_seller_hub.jpeg"
            width="100%" height="100%" x="0" y="0"
            filter="url(#bgBlur)">
        </image>
    </svg>

Затем я пытаюсь добавить это изображение в качестве фона для моего блока с градиентом:

.header__bg{
    background-image:
        linear-gradient(rgba(255,255,255,0.8),rgb(255,255,255)),
        url(../img/test.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 500px;
}

И вывожу это изображение на html-странице:

<div class="header__bg">
   <img class="header__logo_center" src="img/logo.svg" alt="Логотип">
</div>

Но изображение не отображается. У меня так же не получается вывести SVG напрямую:

<img src="img/test.svg" alt="">

И только прямое встраивание через тег работает. Я подозреваю, что проблема в ссылке на внешний файл. На каком-то этапе он "теряется".