Use .svg file for logo

Shopify Partner
7 0 3

Hi,
I would like to upload an .svg for the head logo, but if I try the template editor replyes me "not a valid image".  (see image detail)
Please, could you update the editor to support the .svg file?

Thank you

/paolo

 

1 Like
Tourist
5 0 2

This could be easier, but for now, it looks like the way to do it is as follows:

From your Shopify admin, click Online Store, and then click Themes.

Find the theme you want to edit, click the button, and then click Edit HTML/CSS.

Click on the Assets folder to open it.

Assets folder

Click Add a new asset.

Add asset link

Click the Choose file button and locate your favicon.

Click Upload asset.

Click on the theme.liquid file to open it in the online code editor.

Theme liquid

In theme.liquid find the line with "logo.png" in it by doing a search. It's line 171 in my theme file.

Change 'logo.png' to 'your-logo-name.svg' where your-logo-name is the name of your .svg file and 'logo_home' to 'your-logo-name_home.svg' (so keep the  _home part ). 

Refresh and you should see the logo at the top of your site.

 

Some of the above comes from: https://help.shopify.com/themes/customization/colors-images-and-video/add-favicon 

1 Like
Tourist
5 0 2

had to edit that my reply - kind of funny you can't copy and past from shopify's own help without some messed up formatting.

0 Likes
New Member
4 0 0

Thanks for this tip! SVG is the way to go. Supersharp at all sizes. Worked for me!

0 Likes
New Member
8 0 0

Hello,

I am also trying to use an .svg file for my logo (I am using the minimal theme) but when I tried the above instructions I was not successful. My logo just defaulted to the text version. The only location I could fine my existing logo filename to replace with the .svg file was in "settings_data.json". Is there semething different I need to do here?! My logo in .png form is really not looking too crisp and would love to use .svg instead. Any help is appreciated!

Thanks!

0 Likes
New Member
1 0 0

Trying the same with no luck... Any chance you got some answers since you began your search? 

0 Likes
New Member
8 0 0

Unfortunately no responses so far, sorry. I will update if I ever figure it out!

0 Likes
Shopify Expert
2683 67 676

Hi Guys, you have  sectioned version of the theme, and your logo code is not in the theme.liquid 

After you have added the logo.svg Asset open you header.liquid in Sections and look for this line (there are two of them in this file)

<img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">

and replace them with this:

<img src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo"> 
 

You should still have some picture loaded as logo in theme->customize otherwise the theme would skip this part of code.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
2 Likes
New Member
8 0 0

Thank you so much Tim, this worked!  Now I just need to figure out how to size the .SVG logo accordingly so it is not filling up the entire page - any pointers??

0 Likes
Shopify Expert
2683 67 676

Oh, we can rewrite it like so:

<img src="{{ 'logo.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo"> 

and use the setting from the theme->customize to control the width.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
2 Likes