Provide an SVG filter without an actual svg element

Question

I have an svg only to provide a filter for an img:

<svg>
    <filter id="makewhite">
        <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
    </filter>
</svg>

<img src="icon.svg" style="filter:url(#makewhite)">

This content-less SVG still has a size and pushes my content aside:

Is there a better way to provide a filter to an SVG img?

Answer 1

Yes, there absolutely is. You can inline the SVG file as data: URL and then load it using url() function.

filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="makewhite"><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/></filter></svg>#makewhite');