4 Solid Ways to Use an SVG Logo for WordPress Theme Development

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 get_template_directory_uri()…

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:

1. Install the plugin SVG Support, to whitelist uploading SVG images to the WordPress Media Library
2. In your theme’s header.php file 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 header.php file:

The added code now is $custom_logo[1] and $custom_logo[2] to specify width and height of the custom_logotheme_mod respectively. Hopefully this is all clear!

Wrapping Up

Based on development requirements, you are free to pick what fits best for your WordPress theme. I personally recommend using the custom logo theme support so that it’s easily configurable in the future, unless I will have to animate the SVG code with CSS or JavaScript to fancy it up.

Thank you for reading!

Let me know what your thoughts are too on how you’d implement SVG as a logo in WordPress.