Use SVG code for logo

Hi there,

If you're wanting to use SVG code instead of an SVG as an image, you can use this filter:

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                YOUR SVG CODE HERE
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Hello,

I would like to include svg as code so that I have more control over changes in its apparance over different pages/contexts.

I have tried using this function and it does not work for me. I tried with mobile header turned off and on, with use navigation as header on and off. None works?!

My site uses "use navigation as header" option, but I tried all the options trying to find out how to do it on another test site.

No html is generated.

I added snippet to functions.php and snippets plugin. Doesnt work either way.

Thanks

Hi there,

can we see site with the code added ?

Hi David,

this is my snippet:

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 30" class="apuri-svg-logo" style="height:30px;width:64px">
				  <path fill="#000" fill-rule="evenodd" clip-rule="evenodd" d="M11 14 6 0 0 14h11Z"/>
				  <path fill="#000" d="M26 26h-4v4h4v-4Z"/>
				  <path fill="#000" fill-rule="evenodd" clip-rule="evenodd" d="M64 21a9 9 0 0 1-19 0V0h19v21ZM30 0a7 7 0 0 1 6 7 7 7 0 0 1-6 7h-4V0h4Z"/>
				</svg> 
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

The site is on the local dev server, but here I have one left over from before: https://aljosab10.sg-host.com
Not much to see like this, so tell me if you need a login?

Hi there,

In order to make the code work, you'll need to upload an image first at customizer > site identity.

Hi Ying,

thanks. I hadn-t expected to have to upload to be able to do it :) But I understand now, markup needs to be there to replace it with new one.

I tried now and it works.

https://aljosab10.sg-host.com/

Thanks

Great! Glad it works :)

Hello just adding here for others to have. This is how to implements embeded svg logo both in mobile and desktop menus.

function prefix_svg_logo() {
	return sprintf( // WPCS: XSS ok, sanitization ok.
		'<div class="site-logo">
		<a href="%1$s" title="%2$s" rel="home">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 30" class="apuri-svg-logo" style="height:30px;width:64px"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 14 6 0 0 14h11Z"/><path d="M26 26h-4v4h4v-4Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M64 21a9 9 0 0 1-19 0V0h19v21ZM30 0a7 7 0 0 1 6 7 7 7 0 0 1-6 7h-4V0h4Z"/></svg> 
		</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);
}
add_filter( 'generate_logo_output', 'prefix_svg_logo');
add_filter( 'generate_mobile_header_logo_output', 'prefix_svg_logo');