Use .svg file for logo

[nickh12]

worked a treat, thank you!

[AGL_ID]

Hello guys ! I try install logos SVG on our theme but I have snippet header-logo.liquid with "

" I already add the asset logotipo-agl.svg Our website ... guedeslopes.pt If anyone can give some feedback I appreciate Thanks in advance

[rowena24]

Hey there,

I posted a guide on how I did mine in this post: https://marketingfuzz.com/svg-logo-in-shopify

Let me know if you encounter any problem. I can help you out. 

[Josh_]

For anyone using the Prestige theme.  Here is how I added svg logos to both the transparent and solid header.

Upload your svg logos to the Assets folder.

Find this line.  Its at line 375 I think

<img class="Header__LogoImage Header__LogoImage--primary"
               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"
               width="{{ section.settings.logo_max_width }}"
               alt="{{ section.settings.logo.alt | default: shop.name | escape }}">

          {%- if use_transparent_header and section.settings.transparent_logo != blank -%}
            <img class="Header__LogoImage Header__LogoImage--transparent"
                 src="{{ section.settings.transparent_logo | img_url: image_size }}"
                 srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
                 width="{{ section.settings.logo_max_width }}"
                 alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">

Then replace with this..

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

	{%- if use_transparent_header and section.settings.transparent_logo != blank -%}
            <img class="Header__LogoImage Header__LogoImage--transparent"
                 src="{{ 'logo.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" "{{ section.settings.transparent_logo }}" alt="{{ shop.name }}" itemprop="logo">

The darker logo should go in the first svg placement.  Hope this helps some people.  Love this theme!

[Gordon03]

Hi Josh,

I use the prestige theme and I tried several techniques to put a logo.svg but without success.

I did not understand your solution well could you explain it to me more precisely ?

[Josh_]

Gordon03,

I can try and help.  What part do you not understand?

[ogeid]

Hello Community,

I have two quetions regarding the SVG logo files:

1. Did any one try it on the Debut theme? Here is how my logo section in header.liquid looks like:

{% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <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 }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}

following the previous posts i tried this:

{% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img src="{{ 'logo.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ 'logo.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}

This eliminates the lazyload script .... I'm not sure what to do with the second line...

2. My SVG logo uses a special font which doesn't seem to work in all browsers. Is there a way to embed the font? 

Thanks, Diego

[ogeid]

To answer my own questions....

This is what ended up working best. I manually set the size to 300px, rather than the 250 which are defined by Shopify.

{% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ 'logo.svg' | asset_url }}"
                   data-src="{{ asset_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: 300px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ 'logo.svg' | asset_url }}"
                     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 }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}

As for the font. I simply converted it to an outline and saved it as a new svg file.

[Nechitayka]

Don't know if this topic is still relevant, but I couldn't find any useful information on how to easily manipulate the size of svg file through the code, so I tried to find solution by myself.

All you need is to add your svg file to assets and then insert this line in part of the code which represent a place on a page where svg file must be displayed:

<img src="{{ 'name.svg' | asset_url }}" width="n">

where n is a number that represents width in px, for example:

<img src="{{ 'funny_picture.svg' | asset_url }}" width="160">

That's it! Now you can resize your svg file however you need by changing the number of width="n".

Not sure if this is the correct way but it's fast and easy and it works. Your image will perform sharp on any device.

Hope someone will find this useful.

[ewagency]

Hello!

Can anyone help us with the SVG logo upload to the Capital theme?

We tried all instructions from this topic but nothing worked for us.