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;
}
Was This Tutorial Helpful?