Replace Logo Image with Inline SVG Code

Hi JoeSurf,
with the “SVG Support” plugin you can include an SVG instead of a PNG or JPG as a logo in the theme options.
Best regards
Christian

A few things to keep in mind:
If both the logo and the logo for the transparencies is an inline svg

.logo, .logo a {
  overflow: visible;
}
.logo svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 450px    /*** an absolute value might be necessary for best browser support  ***/
}
#top :not(.av_header_transparency).av_alternate_logo_active .logo .subtext svg {
 opacity:0;
 filter:alpha(opacity=0)
}

the svg code inside in the head section :

<svg alt="transparent Logo Webers Webdesign" title="Webers Webdesign" version="1.1" id="Webdesign-transparent"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" width="100%" height="100%" viewBox="0 0 570 200" 
preserveAspectRatio="xMinYMid meet" xml:space="preserve">

• if width and height is set it will be responsive to the surrounding container.
• the preserveAspectRatio setting determines the way the svg shrinks with its surrounding container (xMinYMid – means it shrinks to the left side but stays in the middle on y-Achsis)

if this is the fact – you do not need to set different display options for the .logo and .logo a
see here: https://webers-testseite.de/

If you like to replace all imgs that are svg files with its inline code without plugin – it might be nice to preserve ( or set ) title, alt and class attributes.
I wouldn’t change the inline svg ID.
Put this to your child-theme functions.php:

// replace every svg with its inline code
function replace_img_if_svg_with_inline_svg() {
?>
<script type="text/javascript">
(function($) {
  $('img').filter(function() { return this.src.match(/.*\.svg$/); }).each(function(){
    var imgSVG    = $(this);
    var imgURL    = $(this).attr('src');

    var imgAlt    = $(this).attr('alt');
    var imgTitle  = $(this).attr('title');
    var imgClass  = $(this).attr('class');

    $.get(imgURL, function(data) {
    var svg = $(data).find('svg');

    // Remove invalid XML tags
    svg = svg.removeAttr('xmlns xmlns:xlink');

    // add replaced image's alt tag to the inline SVG
    typeof imgAlt === 'undefined' || imgAlt === '' ?  (svg = svg.attr('alt', 'Replaced Image')) : (svg = svg.attr('alt', imgAlt)) ;

    // add replaced image's Title tag to the inline SVG
    typeof imgTitle === 'undefined' || imgTitle === '' ? (svg = svg.attr('title', 'A SVG Image replaced by its inline code')) : (svg = svg.attr('title', imgTitle));

    // Add replaced image's classes to the new SVG and add replaced-svg as new class
    typeof imgClass === 'undefined' || imgClass === '' ? (svg = svg.attr('class', 'replaced-svg')) : (svg = svg.attr('class', imgClass+' replaced-svg'));

    // Replace image with inline SVG Code
    imgSVG.replaceWith(svg);

    }, 'xml');
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'replace_img_if_svg_with_inline_svg');

This code snippet takes into account the assignment of the attributes within the ALB element.

there are two if clauses to add. I told you above that the svg attribute of preserveAspectRatio decides how the svg react on shrinking.
so if your logo is on the right side ( a class exists on html : html_logo_right – and if the logo is centered it has on html the class: html_logo_center
so code of changing all img svgs goes to inline-svgs has two check if img is a logo img and if html got this class – and change that attribute:

// replace every svg with its inline code
function replace_img_if_svg_with_inline_svg() {
?>
<script type="text/javascript">
(function($) {
  $('img').filter(function() { return this.src.match(/.*\.svg$/); }).each(function(){
    var imgSVG    = $(this);
    var imgURL    = $(this).attr('src');
    var imgAlt    = $(this).attr('alt');
    var imgTitle  = $(this).attr('title');
    var imgClass  = $(this).attr('class');
    $.get(imgURL, function(data) {
		var svg = $(data).find('svg');
		// Remove invalid XML tags
		svg = svg.removeAttr('xmlns xmlns:xlink');
		// add replaced image's alt tag to the inline SVG
		typeof imgAlt === 'undefined' || imgAlt === '' ?  (svg = svg.attr('alt', 'Replaced Image')) : (svg = svg.attr('alt', imgAlt)) ;
		// add replaced image's Title tag to the inline SVG
		typeof imgTitle === 'undefined' || imgTitle === '' ? (svg = svg.attr('title', 'A SVG Image replaced by its inline code')) : (svg = svg.attr('title', imgTitle));
		// Add replaced image's classes to the new SVG and add replaced-svg as new class
		typeof imgClass === 'undefined' || imgClass === '' ? (svg = svg.attr('class', 'replaced-svg')) : (svg = svg.attr('class', imgClass+' replaced-svg'));
		// check where the logo is placed : left or right or centered in the header
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_left')) {
			svg.attr('preserveAspectRatio', 'xMinYMin meet');
		};
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_right')) {
			svg.attr('preserveAspectRatio', 'xMaxYMin meet');
		};
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_center')) {
			svg.attr('preserveAspectRatio', 'xMidYMin meet');
		};
		// Replace image with inline SVG Code
      	imgSVG.replaceWith(svg);
    }, 'xml');
});
})(jQuery);
</script>
<?php
}	
add_action('wp_footer', 'replace_img_if_svg_with_inline_svg');

you can see here on my test-page that if the logo is on the right – it shrinks to the right:
https://webers-testseite.de/impressum/datenschutzerklaerung/
here is the css code for “nearly” all instances ( header left, center, right with transparency or not ):

.logo, .logo a {
  overflow: visible;
}

.logo a {
  display: flex;
}

#top .logo svg {
  position: relative;
  left: 0;
  top: 0;
  width: 450px;
}

#top .logo .subtext svg {
    position: absolute;
}

.html_logo_right #top .logo svg {
  left: auto;
  right: 0;
}

.html_logo_center #top .logo > svg {
  -webkit-transform: translateX(-50%);  
  transform: translateX(-50%);
}

#top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
    filter: alpha(opacity=0);
}

#top :not(.av_header_transparency).av_alternate_logo_active .logo .subtext svg {
    opacity: 0;
    filter: alpha(opacity=0);
}

.av_header_transparency .logo .subtext svg {
    opacity: 1; 
}