SVG logo in header

I've been trying to use this known custom code to upload an SVG logo into the header of what I think is a 7.1 theme but to no avail.

Following the procedure:

- I first uploaded a transparent PNG logo in my header;

- I then uploaded an SVG as a file and copied the URL;

- Then, I referenced the SVG file's URL in this custom code:

/*Hide PNG Logo*/
 .header-title-logo img, .header-mobile-logo img {
visibility: hidden;}

/*Replace with SVG Logo*/
.header-title-logo a, .header-mobile-logo a{
background: url('https://lanternfish-triceratops-jlgd.squarespace.com/s/logo__lcdy.svg') no-repeat!important;
background-position:center!important;
background-size: contain!important;}

Note that I also use custom code to make the nav bg transparent:

/* Homepage header transparent */
body.homepage article section:first-child {
    padding-top: 0px !important;
}

body.homepage header#header {
    background-color: transparent !important;
}

Not only the SVG doesn't show, but I don't seem to have the option to upload a new PNG logo in the header anymore, even after removing that Custom CSS. It seems the template is "broken," probably because I uploaded a transparent PNG.

Please help me solve that SVG issue or at least restore the original option for uploading a @2x PNG logo in the header.

I'm pretty sure I'm not alone in having this issue. Thank you in advance for taking the time to solve what should be way more straightforward on a platform like SS (support of SVGs... come on, guys!)

Would it be possible to completely bypass the SS Header Nav Bar and use solely custom code instead?

Here's an example of what I am trying to achieve.

Can you share site url? We can check easier

But I think you can use this shorter code

header#header img {
	content: url(https://static1.squarespace.com/static/660d9843e9b8f420dfd57b2b/t/66b418da5f5f085d79d43e40/1723078874410/logo__lcdy.svg);
}