Here is something crazy. I have been fighting a similar issue for days now and tried everything I could think of. My flux Filament menus were unusable and I had been jumping through hoops to avoid SVGs everywhere. I thought it might be an issue with my dev environment but I don't have room on my live server to add anything at the moment so I couldn't test that easily.

In Filament, I couldn't get my webp logo to display in the flux menu even though it showed up in dev tools.

I came across an issue about flex containers causing issues. Sometimes I would see the svg image extremely large on the page so I started playing around with Filament css and I found the issue.

Last month I set a default padding on img, svg, & video tags. Simply removing the "p-4" solved all issues.

@layer base {
    img,
    svg,
    video {
        @apply block max-w-full p-4;
    }