Vector logo issues on mobile device.

[entranced]

I finally decided to replace the blurred .png logo with a vector based one on our site.

It seems nice on the desktop but on mobile devices the logo looks terrible. The font does not seem to be loaded correctly in the svg file and the entire logo looks compressed.

On desktop it looks fine:

On mobile device it looks awful:

This is what I have done:

1. Uploaded a .svg-logo to assets.

2. Edited the code as follows

In the header.liquid I removed this code...

<img src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

and replaced with this magic...

<p><a href=""><img src="https://cdn.shopify.com/s/files/1/0412/8843/3815/files/logo.svg?v=1634737206" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a></p>

Venture theme

Link to site 

Are there any tips on how to tweak this so the logo looks okey on the mobile as well?

Thanks.