How To Use A SVG ( Scalable Vector Graphic ) As Your Logo

WordPress doesn’t allow you to upload SVG files to your Media Library. If you try, you get this:

You could add PHP code to your child themes functions file which enables you to upload SVG file types to WordPress like this:

function allow_svg_upload($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

But then you won’t be able to crop the graphic because you’ll get a error like this:

So how do you add a SVG logo to your sites header?

There’s at least 2 ways ways to do this using PHP code and at least 1 way using CSS.

Here’s all 3 tested solutions for logged in members:

Method 1

Add the following PHP code to your child themes functions file and your logo.svg file to your images folder:

add_filter( 'theme_mod_header_image', 'filter_header_image', 10, 1 );
function filter_header_image( $url ) {
	
    $url = sprintf( '%s/images/logo.svg', get_stylesheet_directory_uri() ); 
		
    return $url;
}

Method 2

Add support for a custom header image in your functions file which enables you to add/remove/change your logo in the WordPress customizer. Your themes functions file may already include this code.

add_theme_support( 'custom-header', array(
	'width'           => 300,
	'height'          => 80,
	'header-selector' => '.site-title a',
	'header-text'     => false,
	'flex-height'     => true,
) );

Then register a default header using this code:

register_default_headers( array(
    'child' => array(
	'url' => '%2$s/images/logo.svg',
	'thumbnail_url' => '%2$s/images/logo.svg',
	'description'   => __( 'SVG Logo', 'genesis' )
) ) );

Alternatively, you could also register a default header using code like this:

register_default_headers( array(
        'svg-logo' => array(
        'url'   => get_stylesheet_directory_uri() . '/images/logo.svg',
        'thumbnail_url' => get_stylesheet_directory_uri() . '/images/logo.svg',
        'description'   => __( 'SVG Logo', 'genesis' )
)));

The above code adds a suggested image to the customizer like you see in the following image:

Method 3

Simple CSS will also work. Add your logo.svg to your child theme’s images folder.

.header-image .site-title > a {
    background: url(images/logo.svg);
    background-repeat: no-repeat;
}