JSFiddle - React, Tailwind, and code Playground

HTML

<div id="original">
    <figure>
        <img src="https://picsum.photos/400/200/" alt="" width="200"/>
        <figcaption>(Original image)</figcaption>
    </figure>

    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="80">
        <filter id="filter1">
            <feColorMatrix type="matrix" result="grayscale"
                values="1 0 0 0 0
                        1 0 0 0 0
                        1 0 0 0 0
                        0 0 0 1 0">
            </feColorMatrix>
        </filter>

        <path d="M40,10 h100 v60" fill="orange" />
        <text x="10" y="40">(Inline SVG with filter for #test1)</text>
    </svg>
</div>

<h2>1</h2>
<img src="https://picsum.photos/400/200/" alt="" id="test1" />

<h2>2 - filter in data URI</h2>
<img src="https://picsum.photos/400/200/" alt="" id="test2" />

<h2>3 - filter in blob URL</h2>
<img src="https://picsum.photos/400/200/" alt="" id="test3" />

CSS

#test1 {
    filter: url('#filter1');
}
#test2 {
    /*
        Error:
        "Unsafe attempt to load URL (...) from frame with URL <URL>. Domains, protocols and ports must match."
    */
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E %3Cfilter id='filter2'%3E %3CfeColorMatrix type='matrix' result='grayscale' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0'%3E %3C/feColorMatrix%3E %3C/filter%3E %3C/svg%3E#filter2");
}
#test3 {
    /* See JavaScript panel */
}


#original {
    display: flex;
}
figure {
    padding: 0;
    margin: 0;
}

Babel + JSX

const svg3 = 
`<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter3">
        <feColorMatrix type="matrix" result="grayscale"
            values="1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0">
        </feColorMatrix>
    </filter>
</svg>`;

//String -> Blob -> URL
//https://developer.mozilla.org/en-US/docs/Web/API/Blob
//https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
const blob3 = new Blob([svg3], { type: 'image/svg+xml' }),
      url3 = URL.createObjectURL(blob3);

document.querySelector('#test3').style.filter = `url('${url3}#filter3')`;