Replacing navbar logo with SVG yields spacing/position issue

Hiya Webflow community,

Trying to get my own company launched and have been dumping tons of hours into this small issue alone blocking my progress…

I’m working off an official template. I go to simply replace the navbar logo with my own SVG logo, and just by that simple 2-click change alone it always immediately ruins the navbar layout. The container-wrapper that holds my SVG logo always expands to hold a ton of whitespace, and that whitespace is what ruins the navbar layout. At this point I’ve played with and tested virtually every setting/option that I could find between all associated elements that affects this and nothing I try to do fixes the issue.

Allow me to illustrate it now:

  1. I select the template logo (NOTE: the blue border selects exactly the edge of the template logo), and in Image Settings, proceed to ‘Replace Image’ to my previously uploaded SVG logo asset:

  2. Next my SVG logo asset is replaced:

  3. Within Image Settings, I try adjusting the width from Auto to 250px, a large amount of whitespace is included with my logo selection, none of which is desired, throwing off the rest of the navbar. The desired outcome would be for the selection box to exactly outline the edges of my SVG logo:

Why does this happen? As far as I can see in the SVG code, there is no whitespace being added programmatically.

So I’m not sure why Webflow treats it like this. Is there maybe a different element I should be using to position an SVG in that spot? - Since the template asset in that spot was a PNG?

Lemme know, getting past this hurdle alone would make my day… Thanks!

I think my problem is actually a ‘ViewBox’ variable in my SVG code that is creating all that extra whitespace that the logo selector is surrounding. I described this to my graphic artist and hopefully it’s something he can fix.