GeneratePress: Output inline SVG code instead of as an image

gp-svg-logo.php

/** Updated and tested with GeneratePressVersion: 2.4.2 **/

/**
 * Check if logo is svg and output svg code instead of image
 */
function generate_construct_logo() {
	$logo_url = ( function_exists( 'the_custom_logo' ) && get_theme_mod( 'custom_logo' ) ) ? wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' ) : false;
	$logo_url = ( $logo_url ) ? $logo_url[0] : generate_get_option( 'logo' );

	$logo_url = esc_url( apply_filters( 'generate_logo', $logo_url ) );
	$retina_logo_url = esc_url( apply_filters( 'generate_retina_logo', generate_get_option( 'retina_logo' ) ) );

	$logo_width = generate_get_option('logo_width') ? generate_get_option('logo_width') : '180';

	// If we don't have a logo, bail.
	if ( empty( $logo_url ) ) {
		return;
	}

	/**
	 * generate_before_logo hook.
	 *
	 * @since 0.1
	 */
	do_action( 'generate_before_logo' );

	$attr = apply_filters( 'generate_logo_attributes', array(
		'class' => 'header-image',
		'alt'	=> esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		'src'	=> $logo_url,
		'title'	=> esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
	) );

	if ( '' !== $retina_logo_url ) {
		$attr['srcset'] = $logo_url . ' 1x, ' . $retina_logo_url . ' 2x';

		// Add dimensions to image if retina is set. This fixes a container width bug in Firefox.
		if ( function_exists( 'the_custom_logo' ) && get_theme_mod( 'custom_logo' ) ) {
			$data = wp_get_attachment_metadata( get_theme_mod( 'custom_logo' ) );

			if ( ! empty( $data ) ) {
				$attr['width'] = $data['width'];
				$attr['height'] = $data['height'];
			}
		}
	}

	$attr = array_map( 'esc_attr', $attr );
	
	$logo_type = end(explode('.', $logo_url));

    $arrContextOptions = array(
        "ssl" => array(
            "verify_peer" => false,
            "verify_peer_name" => false,
        ),
    );

    $svg = file_get_contents($logo_url, false, stream_context_create($arrContextOptions));

	$html_attr = '';
	foreach ( $attr as $name => $value ) {
		$html_attr .= " $name=" . '"' . $value . '"';
	}

	// Print our HTML.
	if ($logo_type == 'svg') {

        echo '<div class="site-logo">';
        echo '<a href="' . home_url('/') . '" title="' . get_bloginfo('name', 'display') . '" rel="home">';
        echo $svg;
        echo '</a>';
        echo '</div>';

    } else {
	echo apply_filters( 'generate_logo_output', sprintf( // WPCS: XSS ok, sanitization ok.
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img %3$s />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	), $logo_url, $html_attr );
}

	/**
	 * generate_after_logo hook.
	 *
	 * @since 0.1
	 */
	do_action( 'generate_after_logo' );
}



/**
 * If logo is SVG get the logo width from customizer
 */
function wcd_logo_width()
{
    $logo_width = generate_get_option('logo_width') ? generate_get_option('logo_width') : '180';
    $css = '<style>';
    $css .= '.site-logo svg { height: auto; width: ' . $logo_width . 'px;}';
    $css .= '</style>';

    echo $css;
}
add_action('wp_head', 'wcd_logo_width');

Hi Jon,

I tested the code. It isn't working for me. Can you confirm?

Thanks

Hi Jon,

I tested the code. It isn't working for me. Can you confirm?

Thanks

Just tested and updated

Hi Jon,
I tested the code. It isn't working for me. Can you confirm?
Thanks

Just tested and updated

Thank you :)

Getting this while activating it via code snippet plugin. Am I missing something?

It is because it needs to be in a child theme, or before the GeneratePress theme is active.

So if using the codesnippets plugin, activate twentytwenty theme and then activate the code in code snippets, then reactivate GeneratePress theme..

Remember to always back up first just in case

Does it still work on 3.1.0? Mine was deactivated.

I now did as you explained above and switched to twentytwenty in order to switch the snippet on. No error message was triggered! :) No changes so far and now I will have to wait and see if the PNG changes to the SVG. :)