SVG Logo on scroll

You can upload an SVG as your logo as long as you have a plugin like this installed: https://wordpress.org/plugins/safe-svg/

You can find more info here: https://docs.generatepress.com/article/adding-svg-logo/

I have that plugin already installed and css code in the css editor for:

.site-logo img {
width: 200px;
height: 40px;
}

But it auto scrunches it and makes it weird.

Try this CSS:

.main-navigation .navigation-logo img {
    height: 40px;
    padding: 0;
}

That keeps it working for scroll fine but too big for normal logo. Is there another css code to add to that to control logo size before scrolling?

It looks squished in the sticky nav, try this:

.main-navigation.navigation-stick .navigation-logo img {
    width: auto;
}

Although I'm seeing it as a PNG, which wouldn't require any of this. Did you remove the SVG?