Using an SVG logo (brooklyn theme).

Solved
Tourist
10 0 2

Hello!

 

I started my shopify store two days ago and I made a logo, but I saved it in SVG format because I'd like it to be as crisp as can be. For some reason, shopify doesn't let me save it as a logo. I've gone through many threads on this topic, but none of them seem to work for me. I've tried editing my code with a whole bunch of stuff, but I can't find a solution. I'm not a programmer so I'm kinda just trying what gets thrown at me!

 

The error that I receive when I drag-and-drop the .svg file into the logo area is:

(image/svg + xml) is not a recognized format

 

Located in the header.liquid file is this code that I've used (found it in another thread):

                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ 'Web 1920 – 4.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'Web 1920 – 4.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">
                    {% endif %}

I've added my svg logo exactly called "Web 1920 – 4.svg" in the assets folder. But still, for some reason, it's still popping up with the regular, default store logo shopify made me when I created my store.

 

If someone is able to help me out here, that would be so awesome!

 

Take it easy.

0 Likes
Excursionist
25 2 6

Firstly Shopify definitely doesen`t allow SVG in their designated img tags on their frontend (which sucks really).

 

However,  Shopify also don't allow whitespaces for their assets filenames. 

Your "Web 1920 – 4.svg" file has two whitespaces which have probably been replaced by underscores upon upload.

 

I suggest you go to your assets folder, find your desired SVG file click on rename on top right corner then copy and past  that filename in your src declaration in your img tag.

 

I believe that should do the trick.

Let me know how it goes

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
Tourist
10 0 2

Hi,

 

Thanks so much for the reply, I appreciate it. So, you were right - Shopify changed my original file name to "Web_1920_4.svg", replacing the spaces and other characters with a space. I did change that in my code, but it still only shows the default logo saying my shop name.

 

Here's my code that I currently have:

                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ 'Web_1920_4.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'Web_1920_4.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">
                    {% endif %}

Instead of my logo that I made, it shows this:

annotation.png

 

I'm definitely doing something wrong but I just have no idea what it is. Any more help would mean a lot!

 

Thanks. :)

0 Likes
Shopify Partner
2569 133 433

This is an accepted solution.

First inspect your pages html source code (ctrl+U) and verify that <img> tag is actually being output

 

If html is not being rendered then check your theme builder for that logo setting if it has a check box to turn logos on off (i.e. section.settings.logo)

 

If no such checkbox then either or just add any image to the image picker, or  temporarily change this line

 {% if section.settings.logo %}

to {% if true %}  and go back through steps.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Tourist
10 0 2

Hey Paul,

 

Thanks so much for the reply. So, I went through the steps and couldn't find an <img> anywhere in the html source code, and I couldn't find a checkbox for a logo, so I just dropped a random .png file in the logo selector and my .svg logo popped up! Thanks so much for providing a solution, it really helps me out!

 

Take it easy :)