Change SVG Header logo on certain pages

I would like to change the SVG logo I'm using in the header to a different one on certain pages. I found this code:

<style>
header#header img {
    content: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
}
</style>

That changes the logo, but the SVG comes in tiny on the page. I figure since using an SVG in general requires more in CSS than just replacing what's there, I'm obviously missing some code I need to use.

I should add that the URL in the code above was changed to an SVG image on my site.

Can you share link to page where you have problem?

Here's the link:

SVG test

You can see the current SVG by clicking on any of the navigation links. The replacement SVG in the page in question is the same size as the one used throughout the site.

Note that when it's seen online, nothing is showing where the SVG should be. In the Squarespace work area, I at least see it small:

Currently you are using 2 code to add svg logo, and the code you posted in this thread didn't work.

This code works

to make your new code works, use this new code

<style>
  header#header .header-title-logo a {
    background-image: none !important;
    width: 200px !important;
}
header#header img {
    content: url(https://garlic-hawk-pdp3.squarespace.com/s/JohnWeberArt-10.svg) !important;
    visibility: visible !important;
}
</style>

OK great! If you go to the page now, I've substituted the other SVG I want to use on that page. 

How can I make it be the same size as the SVG (JohnWeber) which is used everywhere else on the site?

And thanks for the help!

I think we should change code I sent (I Just checked again and it looks like you used this code on other pages).

You can remove code I sent & revert code you used, I will check again & send new code

I reverted to the original code for that page. Does there need to be something that tells the current SVG (John) to be replaced with the alternate one (Lisa)?

Try this code to Page Header

<style>
  @media screen and (min-width: 992px) {
.header-title-logo a {
    background-position: left center !important;
    width: auto !important;
    height: 50px !important;
}}
</style>