Inline SVG Logo

[awecesar]

Hey,
due to loading time concerns and curiosity I’d like to have my logo as an inline SVG on my page:
staging.fourtylove.com

1. How would I do that?
2. Where in the template is the logo defined ( I guess I just have to replace that with the inline SVG, right?)
   Thanks!

[ruenel]

Hello There,

Thanks for posting in!

1. The logo image will only accept .jpeg, .png or .gif file format. You will have to modify the branding template which contains the logo code which will require you to install a child theme.

2. Once you have your child theme active and ready, please follow the following steps below:
a.) Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
b.) Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo '<h1 class="visually-hidden">' . $site_name . '</h1>'; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  
  <?php //echo ( $logo == '' ) ? $site_name : $site_logo; ?>

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>

</a>

Please do not forget to change the svg code

c.) Save the file named as _brand.php
d.) Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/.

You will have to create the folder path because it does not exist yet in your child theme.

We would loved to know if this has work for you. Thank you.

[awecesar]

Thanks for the code but it didn’t work. The file should be implemented correctly but I don’t see the circle SVG logo from your code and additionally I get this error message in the console regarding Google Ads I think (see attachment)
Could you help me here? Thanks!
Have to thank you here already for your and your colleges help. Best customer service I’ve seen. Period.

[ruenel]

Hello There,

The code I gave you will only work if you are using the default navbar. Since you are using Pro theme and a custom header, the code will not work. With custom header, it is another story. It will require a custom development since we need to modify the image element which you are using in displaying the logo in your custom header. Regretfully we do not recommend modifying the image element as this is being used both in the header/footer builder and in the Content editor. Any modifications to this element with an invalid code or output might create conflicts with the other elements or layout of the page.

Hope this explains it briefly.