add svg LOGO

[Ninthony]

Where are you trying to add the SVG

[maxhot]

Primarily I'm trying to add the SVG as a favicon, it would also be good to add it on the left side of the brand if that's possible.

[RobertGems]

I'm also trying to add simple SVG logos to pages on my website and while most browsers and apps have made SVG the standard, Shopify has sadly chosen not to fix their broken, outdated image uploading back-end, evident here, by a post from 2017:  https://community.shopify.com/c/Shopify-Design/SVG-Icon-as-Section-Settings-Image-Picker-Theme-Setti...

I hope you find a solution and if you do, please share it with the rest of us.  Thanks.

[rowena24]

Hey there,

I wrote a guide on how I did manage to use an SVG logo on my store in this post: https://marketingfuzz.com/svg-logo-in-shopify

Let me know if you encounter any problem.

[joenudo]

Where would I put this code to display it? Does it have to go on a specific line?

<a href="/">{% include 'logo-svg' %}

[kailasachse]

Excellent article rowena24! Thank you.

[KetanKumar]

Hello, @maxhot 

Thanks for post 

sorry but i can't see your store.

[ecotec]

Hi Guys, 

I'm trying to add an SVG logo too. And i have succeeded, but its way too big now. 

this is the logo code:

{%- capture header_logo -%}
          <a href="{{ routes.root_url }}" class="header__logo-link">
            {%- if section.settings.logo != blank -%}
              {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
              <img class="header__logo-image"
                   style="max-width: {{ section.settings.logo_max_width }}px"
                   width="{{ section.settings.logo.width }}"
                   height="{{ section.settings.logo.height }}"
                   src="{{ section.settings.logo | img_url: image_size, scale: 2 }}"
                   alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
            {%- else -%}
              <span class="header__logo-text">{{ shop.name }}</span>
            {%- endif -%}
          </a>
        {%- endcapture -%}

        {%- if request.page_type == 'index' -%}
          <h1 class="header__logo">{{ header_logo }}</h1>
        {%- else -%}
          <div class="header__logo">{{ header_logo }}</div>
        {%- endif -%}

 I changed the src to 

<a href="/">{% include 'logo-svg' %}

how do i correctly make it the good size? 

Thanks in advance!

(I'm using the warehouse theme)

[Ninthony]

Should be able to target it with a class in css and define the width:

img.header__logo-image {
width: 50px;
}

Where width is whatever you want the width to be. 

[ecotec]

It's not working. Image doesn't seem to respond to it's class which is strange. I also tried removing the lines in the class 

style="max-width: {{ section.settings.logo_max_width }}px"
                   width="{{ section.settings.logo.width }}"
                   height="{{ section.settings.logo.height }}"

 and i tried it with just defining the width and deleting everything else in the css class like so:

.header__logo-image {
width: 50px;
}

but no luck..