1) Add the Logo as an SVG Image
First off you may simply use the
img element to fetch the SVG through the
src attribute. This is by far the easiest of the lot. Here’s an example:
But this one seems to be quite unstable. So you will have to secure it up a bit, by relocating the image into an
images folder of the active theme. Then referencing it locally from the active theme using
You will notice that this seems to be a lot more future-proof that the previous example. Let’s take it a notch further and say you’d like to be able to customise the SVG logo to change its fill colour every now and then using CSS animations.
Unfortunately this isn’t available with referencing the SVG through the
img element. But you may go further with this by inlining the SVG code.
2) Add the Logo as an Inlined SVG
Downside to this is that you will have to specify the logo for other custom headers if need be, e.g. if you might have different header files for your theme.
But for the most part you are going to have one
header.php file in your theme. Assuming so, here is another example:
Notice how the entire SVG code is now within the
div.site-logo element. If you’d prefer which is recommended, you may prevent the Divitis rule #2 by renaming the
div element as the SVG itself, thereby moving the CSS class
site-logo into the SVG element. Remember to use
display: block; in your CSS if you were meant to keep it like a div though…
Now you are free to work on animating the fill colour of the SVG element!
This is because the SVG code is now treated as regular HTML code would (which it is albeit XML). The rest is up to you and your creativity!
3) Add the Logo Using the WordPress Customiser
This one may seem to be a bit tidier code-wise, but I normally opt for the more creative route. Essentially, you may use the Appearance › Customise › Site Identity › Logo, to add your SVG logo.
To add an SVG logo to the WordPress Customiser:
- Install the plugin SVG Support, to whitelist uploading SVG images to the WordPress Media Library
- In your theme’s
header.phpfile or equivalent, add the following code:
The code above uses
wp_get_attachment_image_src() function to retrieve the logo image, and this is outputted through the
$custom_logo PHP variable. Notice how the
get_theme_mod() function is used to get the
custom_logo ID. Width and Height attributes are added accordingly based on the SVG image’s dimensions.
However, the above code may be further improved to be added through the
add_theme_support( 'custom-logo' ) function, so that the suggested image dimensions are specified.
Now here’s an example of using the custom-logo theme support, to be added within your functions.php file or equivalent:
The code above is found within the Underscores (_s) theme on GitHub.
And now that has been set, you will also have to plug those specified custom logo dimensions into the
The added code now is
$custom_logo to specify width and height of the
theme_mod respectively. Hopefully this is all clear!
Thank you for reading!
Let me know what your thoughts are too on how you’d implement SVG as a logo in WordPress.