Theme Logo is a theme feature, first introduced in Version 4.5. This feature allows themes to add custom logos.
SVG images looks crisp, sharp and easy editable. I love SVG <3 because there is large collections of SVG icons i can use to beautify a site and it is easy to edit and customizable.
Custom Logo feature for a theme is the most recommended method for adding logos in WordPress. The benefit is built-in rich schema feature includes itemprop=”logo” microdata for logo image element.
Custom headers could be messy and not easily manageable.
Wait,
The new Genesis Sample theme support custom logo feature by default so we can use a.png, jpg or even .svg logo easily and that too with itemprop=”logo” schema element.
The two methods to use SVG logo in new Genesis Sample theme
1. As an Inline image
2. As a Background image
Prerequisite
The WordPress doesn’t support .svg image upload support for security reasons and blocked from uploading. We need to allow .svg uploads safely. The best way to do it is to use SVG Support plugin. Install and Activate it.
1. SVG as an Inline Logo
Upload your SVG logo and add it to the header by visiting “Appearance” >> Customize >> Site Identity and add it.
Click Published.
Sometimes, the logo seems to disappear. This is because of width problem. add this CSS to fix that. Change as per your needs.
.wp-custom-logo .title-area {
max-width: 50px;
width: 50px !important;
padding-top: 0;
}
Division by zero warning with SVG logos
2. SVG as a Background Logo
Upload the SVG logo in your themes folder under /images/ or upload it using the media uploader.
use this CSS and change the SVG URL.
/* CUSTOM Title Area SVG
--------------------------------------------- */
.site-title > a {
background: url(/images/logo.svg) no-repeat !important; //change path of the logo
}
.title-area {
float: left;
height: 55px;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
padding: 0;
width: 133px;
}
.site-title > a {
background-size: contain !important;
background-position: left center !important;
float: left;
min-height: 40px;
width: 100%;
}
.site-title,
.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}
This doesn’t include the schema for the logo but works perfectly.