Help with inserting SVG logo in Debutify

[gallodeagosto]

First of all, good evening community, sorry for my low level of English.
I need help before launching my store, I will be eternally grateful if you can give me a hand.
I have the Debutify theme installed in my store, and what I want to do is place the logo in SVG format instead of PNG format.
I understand that I have to replace some lines of code in Header.Liquid, but this Debutify topic has a somewhat different structure and has included some scripts that I cannot read, if someone could help me to replace PNG with SVG it would help me a lot since I will launch my business in less than a week.
I attach the code of the logo that I currently use:

<div class="nav-containers nav-container-logo">
            <ul class="inner-nav-containers">
              
                {% assign image_size = section.settings.height_logo | prepend: 'x' %}
                {% assign image_size_mobile = section.settings.height_logo_mobile | prepend: 'x' %}
              
				{% if template.name == 'index' %}
                	<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
              	{% else %}
                	<div class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
              	{% endif %}
                	<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
               			{% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}
                          	<img class="logo inverted-logo" src="{{ section.settings.inverted_logo | img_url: image_size }}"
                            srcset="{{ section.settings.inverted_logo | img_url: image_size }} 1x, {{ section.settings.inverted_logo | img_url: image_size, scale: 2 }} 2x"
                            alt="{{ section.settings.inverted_logo.alt | default: shop.name }}"
                            itemprop="logo">
                        {% else %}
                      		<span class="inverted-logo">{{ shop.name }}</span> 
						{% endif %}
                    
						{% if section.settings.default_logo %}
                        	<img class="logo default-logo" src="{{ section.settings.default_logo | img_url: image_size }}"
                        	srcset="{{ section.settings.default_logo | img_url: image_size }} 1x, {{ section.settings.default_logo | img_url: image_size, scale: 2 }} 2x"
                       		alt="{{ section.settings.default_logo.alt | default: shop.name }}"
                   			itemprop="logo">
                      
                      		<img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: image_size_mobile }}"
                        	srcset="{{ section.settings.default_logo | img_url: image_size_mobile }} 1x, {{ section.settings.default_logo | img_url: image_size_mobile, scale: 2 }} 2x"
                       		alt="{{ section.settings.default_logo.alt | default: shop.name }}"
                   			itemprop="logo">
                      	{% else %}
                			<span class="default-logo">{{ shop.name }}</span>
                            <span class="mobile-logo">{{ shop.name }}</span>
						{% endif %}
                	</a>
				{% if template.name == 'index' %}
                	</h1>
              	{% else %}
              		</div>
				{% endif %}
            
            </ul>
          </div>