How to Upload a SVG Header Logo?

Site URL: https://sealion-swordfish-4y7r.squarespace.com/config/

Hello, I'm trying to figure out a way to upload a SVG logo in my Header on my Squarespace website. The default panel only allows uploads of JPG's. Is there a a solution? Thank you.

Password: littlemoon (lowercase)

1. On your computer:

• Create your SVG logo
• Name it logo.svg for convenience
• Create a transparent PNG file that has the same dimensions as your SVG logo
• Name it anything you want

2. On your Squarespace:

• Go into Edit mode
• Hover over header
• Select 'Edit Site Header'
• Click on 'Site Title & Logo'
• Upload the transparent PNG file into 'Logo Image'
• Do not upload anything into 'Mobile Logo Image'; leave it blank
• Save all changes
• Exit Edit mode

3. On your Squarespace:

• Go into Edit mode in any page
• Create a text block
• Type any word
• Highlight it
• Select 'Link' in the toolbar
• Click on the gear icon
• Click on 'File' in the left sidebar
• Upload your SVG logo
• Hit 'Save'
• Exit Edit mode without saving

4. On your Squarespace:

• Go to 'Design'
• Click on 'Custom CSS'
• Enter the following CSS code into the section:

.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://your_domain_name.com/s/logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

• Hit 'Save'

Thank you for the detailed and exacting guide. I've already done Steps 1 & 2. Step 4 won't be difficult. Step 3 will be more difficult for me but I will let you know how it works out!  : )