How can I add an SVG logo to Dawn 2.0 theme?

[schaschlyk]

I have my logo available as a png and svg file. I've read that svg files are better because they are smaller, have a better quality and are smaller in size.

I found tutorials online but i cant make it work because the code in dawn os 2.0 is different.

Thank you.

[KetanKumar]

@schaschlyk 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[schaschlyk]

https://schaschlyk.de/

password: leeklas

[KetanKumar]

@schaschlyk 

thanks for URL

sorry but i can't see your svg code if not its custom

[schaschlyk]

i haven't saved my svg logo into my code yet. do i have to in order for you to figure it out?

[KetanKumar]

@schaschlyk 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

[ptrcole]

Hi,

were you able to solve this task? I actually got the same problem.

I've added a SVG File / Logo before for my narrative theme and want to do the same for DAWN.

Have a great day,

Matthias

[schaschlyk]

Unfortunately, no.

I got private message from people who would do it for me, but not for free.

[Paulo_Solinho]

I solved it this way:

1: Upload your SVG logo to shopify: Settings > Files in admin
2: Copy the Logo Link (Copy Link)
3: Go to Theme and Edit Code
4: Search header.liquid
5: Find this code:

    <img srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo | img_url: image_size }}"
              loading="lazy"
              class="header__heading-logo"
              width="{{ section.settings.logo.width }}"
              height="{{ section.settings.logo.height }}"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
            >

Replace with:

<img srcset="https://cdn.shopify.com/s/files/1/0476/8428/8670/files/XXXXXXXX(COPY OUR LINK).svg?v=1624014689"
src="https://cdn.shopify.com/s/files/1/0476/8428/8670/files/XXXXXXXX(COPY OUR LINK).svg?v=1624014689"
loading="lazy"
class="header__heading-logo"
width="{{ section.settings.logo.width }}"
height="{{ section.settings.logo.height }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
>

See it working in my store: https://calcadoportugues.pt/

if anyone has a better solution please tell me

P.S: is NOT working on Firefox

[ParisLefleur]

Hello. Can anyone help with the Dawn Theme. 

My goal is to be able to make my logo much bigger than what .PNG & .JPEG allows. 

I was told if I use an .SVG logo, I can size it as I want. Is this true? And if so, how? I’ve tried the codes everyone is posting to delete in header.liquid but the Dawn theme doesn’t have any of those codes. Please help. 

[Eleneby]

Hello, 

Is this really only what you did to get the logo svg. Because in my case the size of the logo is huge. I can't resize it as I can see on your site.

Have a good day

[Vierettt]

For anyone having the same problem (means pasting the link works, and you successfully replaced the logo with a vector file, but now it's way too large) - I had the same problem in Dawn theme, and I found a solution that works for me. But I want to point out that I'm not a developer.

Go to your base.css file, find a line of code (around 1895 in my theme):

.header__heading-logo {
height: auto;
width: 100%;
}

and change the width value for whatever works for you (for me 50% was perfect).

Now, if you have the logo center-aligned, you might notice that it's not in the middle anymore. In my case, I went to line 1816, and in this piece of code:

.header {
display: grid;
grid-template-areas: 'left-icon heading icons';
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}

I've changed values to: grid-template-columns: 1.5fr 1fr 1fr;

This centered my logo back.