How can we use a .svg logo on the Brooklyn theme?

[dimitrieraw]

Guys, the question is pretty clear. I've been trying to find an answer to this question for the past couple of days and went through all the threads there are. Unfortunately, none of them work. Thanks in advance.

[oscprofessional]

Hello @dimitrieraw,

1. Go to Online Store->Theme->Edit code
2. Asset->Add new asset (as logo.svg)

then go to header.liquid

search below 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">

Replace with this

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

[dimitrieraw]

Hey, thanks for your reply. However, my code is looking different from what you've sent. If I remember well, it's the same solution you've provided on another thread that I've read and tried.

This is the code which I have found in regard to the logo on headler.liquid

{% if section.settings.logo %}
                    <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">

                    {% 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="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_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">
                    {% endif %}

[oscprofessional]

@dimitrieraw,

Did you add logo.svg in asset

Replace your code with this

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

[dimitrieraw]

Thanks again but now the logo doesn't show at all. Of course, I've added the logo to my assets. 

I guess the name doesn't have anything to do with this as long as I am using the same asset name in "Assets" as in code, right?

[oscprofessional]

did you add logo.svg

[dimitrieraw]

Of course I did. It just does not show.  The .svg file is added as logo.png in the Assets.

Here is the code in my header.liquid

{% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ 'logo.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="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}

[KingKang]

Hi @dimitrieraw , I also use Brooklyn theme, and I realised that maybe this is not working for you, because you must replace it in both "if".

So, after you upload your .svg logo with the name "logo.svg", in your theme assets, search for this code (mine is around line 193-207): 

{% if section.settings.logo-inverted and template.name == 'index' %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">

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

</a> {% elsif section.settings.logo %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">

<img id="dab-header-logo" 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 replace both bold code with this one,

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

[dimitrieraw]

Thank you very much, man. I have passed this theme for a paid one but I am sure that someone will take advantage of your input. Have a nice one!

[Mikko]

Hey!

I know you've switched the theme, but I think someone will find this helpful.

This worked for me!

1. Click Edit Code on your theme

2. Scroll down to Assets and Add a new asset with the name "logo.svg"

3. Go to header.liquid

4. Scroll down to line number 90 or so and spot the following code:

{% if section.settings.logo-inverted and request.page_type == 'index' %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<img src="{{ section.settings.logo-inverted | img_url: image_size }}"
srcset="{{ section.settings.logo-inverted | img_url: image_size }} 1x, {{ section.settings.logo-inverted | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
itemprop="logo">

</a>

{% elsif section.settings.logo %}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
<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">

</a>

5. Replace the bolded parts with this:

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

Hope it helps.