How to resize Vector Logo❓

Solved
Highlighted
Explorer
86 7 14

Hello,

 

As the title says, how to resize vector logo? As you know, Shopify themes don't support SVG (vector) files so I had to add it by coding.

 

What I've done was a add a 2 logos (regular and transparent) to an assets folder. Then, in header.liquid I've done was:

Edited these to 2 lines:

<img class="site-header__logo-image" 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">

<img class="site-header__logo-image site-header__logo-image--transparent" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

 

To this:

<img class="site-header__logo-image" src="{{ 'logo.svg' | asset_url }}" srcset="{{ 'logo.svg' | asset_url }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

<img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'logo2.svg' | asset_url }}" srcset="{{ 'logo2.svg' | asset_url }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

 

I don't really code, so it took me a lot of time to even add these vector logos. Can anyone help me out on how to make these vector logos smaller?

 

Thank you in advance

0 Likes
Highlighted
Excursionist
46 11 13

This is an accepted solution.

Hi, @Dumax 

Hope you are doing great on these crazy times

So for this you would need to add some CSS code to resize your image and it would like something like this:

.site-header__logo-image {
width: 100px; //Change this to fit your needs
height: auto;
}

 

Thanks

 

Kindly Regards, 

Juan 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Worked for 2 years as Shopify Developer.
◦ Contact me at: juansmartdev@beeethereal.com
1 Like
Highlighted
Explorer
86 7 14

Thank you.

Can you tell me where exactly to put this code? I can't figure it out.

0 Likes
Highlighted
Excursionist
46 11 13

This is an accepted solution.

Your welcome.

On your main CSS file, the name really depends on your theme. But it would
like something like: Theme.scss.liquid or Theme.css.liquid or theme.css,
and so on, just find the right one and put that code and modify to your
needs

If you need more help feel free to reach me over DM.

Thanks

Regards,
Juan
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Worked for 2 years as Shopify Developer.
◦ Contact me at: juansmartdev@beeethereal.com
1 Like