askdesign
3/15/2017 - 6:14 PM

How to set up SVG logo in Genesis

March 15, 2017 by Sridhar Katakam

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”.
// 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.

// 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,
) );

// 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.

https://sridharkatakam.com/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.
/* -- 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;
}
// 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;
}