How to set up SVG logo in Genesis

Looking to use a crisp vector svg file as your site’s logo instead of the standard png? There are two ways in which SVG logos can be set up in your Genesis powered WordPress website:

• As a background
• As an inline image

Prerequisite

For either method, first, install and activate SVG Support plugin.

Then go to the plugin’s settings, enable advanced mode, restrict it to administrators and set the JS to be output in footer.

Background SVG Logo

Step 1

Locate code similar to

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 140,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-height'     => true,
) );

in your child theme’s functions.php.

Add 'flex-width' => true so the above becomes:

// Add support for custom header
add_theme_support( 'custom-header', array(
    'width'           => 600,
    'height'          => 140,
    'header-selector' => '.site-title a',
    'header-text'     => false,
    'flex-width'     => true,
    'flex-height'     => true,
) );

This is to add a “Skip Cropping” button during the svg file image upload to bypass the There has been an error cropping your image. error.

Optional: If you would like to provide a suggested header image, upload the svg file to child theme’s images directory and add this code in child theme’s functions.php:

// https://codex.wordpress.org/Function_Reference/register_default_headers.
register_default_headers( array(
    'svg-logo' => array(
    'url'   => '%2$s/images/logo.svg',
    'thumbnail_url' => '%2$s/images/logo.svg',
    'description'   => __( 'SVG Logo', 'CHILD_TEXT_DOMAIN' ),
    ),
));

Replace logo.svg in the above with the name of your header (logo) svg file.

Step 2

In WordPress admin, go to Appearance > Header.

If you have followed the optional step above, simply click on the suggested image and hit “Save & Publish” button.

If you have not followed the optional step, click on “Add new image”, either upload or select your svg image file, click “Select and Crop”, then “Skip Cropping” and finally “Save & Publish”.

Inline SVG Logo

Step 1

Follow Theme Logo in Genesis tutorial.

Step 2

In child theme’s functions.php, add

add_filter( 'get_custom_logo', 'sk_custom_logo' );
/**
 * Filter the output of logo to add a custom class for the img element.
 *
 * @return string Custom logo markup.
 */
function sk_custom_logo() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( home_url( '/' ) ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo style-svg',
                'itemprop' => 'logo',
            ) )
        );
    return $html;
}

Step 3

In child theme’s style.css, set width and height of your desired logo display size in the .custom-logo selector.

Ex.:

.custom-logo {
    vertical-align: top;
    width: 300px;
    height: 70px;
}

References

http://wordpress.stackexchange.com/questions/207442/how-to-use-a-svg-as-custom-header

wp-includes/general-template.php