Using SVG logo in your WordPress site is one of these techniques that bring only good effects as it optimizes your website on at least 2 levels:
Firstly, it will make your logo look as sharp as possible on a device it is displayed on. It means it will always look as intended. No more multi images for the logo to cover various screen DPIs.
The second reason is that if used in the correct way, your site will require at least one less HTTP request. Fewer requests equal faster loading website.
These are just 2 basic reasons to use SVG as a logo, but there are many more, like for example possibility to influence your logo with CSS depending on the situation.
Hope you are interested, cause now we will dive into details.
How to create SVG image
The first thing we need is to create your logo in the SVG format that will represent your logo.
If you have your current logo in PNG format and it is high detail image, you can try online converters like described here.
If you want to create it from scratch, then you will need some Vector image tool, like Illustrator or Adobe XD.
No matter what tool you will use be sure to covert each shape and used fonts to Paths. This way font that you have used will be converted to lines that will describe precisely used letters.
For example, in the Illustrator you should use export to SVG instead of “Save As…”.
After you got your image ready, try to optimize it to reduce its size. For this, you can use Online SVG Optimize tool – SVGOMG.
Time to use your new logo!
How to enable SVG in WordPress
By default, if you try to upload SVG image into WordPress it will be rejected. This is because the SVG format is disabled for security reasons(we will talk about this later). However, if you have created your SVG file yourself then there is nothing to threat about.
To active “SVG upload support”, we need a plugin. A good choice is Safe SVG plugin as it will make sure your SVG file doesn’t contain any vulnerabilities. You can install this plugin right from the admin panel and activate it later.
From now on you will be able to upload SVG images to your WordPress Media Library.
Inlining SVG in your site – benefits
Time to add your new SVG logo to your website. There are various ways to do it, but we will focus on 2 easiest and also the most powerful:
- Adding as standard HTML image tag
<img src="file.svg" alt="Scallable image" /> - Embedding code of SVG file right into your website code, also known as inlining SVG.
Most themes out there should be able to use the first method, as they probably are already using image logo anyway. However, depending on a code of your SVG file, there might be some quirks in some web browsers with this method. Still, you are also making extra HTTP request for your logo file, so the only benefit is a sharper logo. You also lose the option of CSS manipulation.
As for the second method, that we are interested in, without special treatment none of the themes will be able to use a logo like that. This method of using SVG logo is better than the first one because:
- it doesn’t create extra HTTP requests
- you can manipulate the layout of your SVG logo parts (colors, size or even animation) right from CSS which creates a lot of possibilities.
Unless you don’t plan to edit the code of your theme, you can use Rife Pro Theme, that supports inlining SVG logo. We’ve made extra efforts to handle inline SVG logo so it will be displayed properly in IE 11, IE 10, or even IE 9. All is described in Rife Pro documentation.
Following Daryll Doyle advice we are inlining SVG in the safest way, so SVG code wouldn’t fail your whole site while embedding, by adding unintended PHP syntax.
Inlining SVG in your site – things to be aware
The thing that is good to remember: The SVG format is more of document type(XML to be precise) then image type. It is even closer to HTML than any “classic” image format like JPEG, PNG or GIF. Each tag in SVG file can have own class, id and you can find CSS blocks in SVG.
If you inline your SVG logo, then image used will be part of the code of your website, not a separate image like with “classic logo” that is just “anchored” with the image tag.
When SVG file code is inlined in your webpage there is a chance for a conflict. This conflict manifest by this that either page CSS and JavaScript can target fragments of SVG or CSS from SVG could target your website layout parts. It is possible but rather rare to happen.
If you are doing this intentionally then this feature, otherwise it is a risk.
SVG example
Below you can see example SVG file(I have removed paths details to keep this example simple)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 262 49"><defs><style>.a{clip-path:url(#b);}.b{fill:#2c2c2c;stroke:rgba(0,0,0,0);}.c{fill:#dc1649;}</style><clipPath id="b"><rect width="262" height="49"/></clipPath></defs><g id="a" class="a"><path class="b" d="..."/><path class="c" d="..."/></g></svg>As you can see there are class and id attributes, and CSS block. Although “SVG generators” often use single letter ID and classes for paths and shapes, it is good to be aware that they can affect your website in unintentionally way.
So if your webpage will look weird after adding SVG logo, in places where it shouldn’t be affected, checking for classes/IDs conflicts is a good place to start.
Look out for SVG from not verified source
As we have said before SVG files are XML documents, and as such can contain scripts and those can open your website to attacks.
That is why you probably shouldn’t use SVGs found somewhere on the net. That is also why SVG support is not enabled by default in WordPress.
It is not an easy task to write a program that will sanitize uploaded SVG files, but it seems that Safe SVG plugin(that we have installed earlier) is doing a good job so far.
If you are interested in a deeper article about SVG I can suggest one from our friends at Kinsta.
A live example of an SVG logo
Before we will end I want to show you how the SVG logo acts in the wild.
Look at the page that you are currently on 🙂 and our Apollo13Themes logo. Zoom it as you like – it always stays sharp, unlike PNG or JPG logo images.
We use here Rife Pro theme so we have inlined SVG. Rife Pro theme has a feature that is called header color variants, and also an option for a sticky header. Because of all these features, there is a possibility to upload up to 8 images for the logo: 4 for normal DPI screens and 4 for High DPI screens – 2 per each color variant.
We have used all of them, to make our logo always visible no matter what type of background color is set on a sub-page. After replacing our PNG logo, instead of 8 possible HTTP requests, we have 0 🙂
On pricing page, we change the color of parts(paths) of SVG using CSS. Thanks to this we don’t have to manage the next version of the SVG logo. In theory, we can now have a totally different color of a logo on each an every page without any extra request!
Even if we would use solid background-color for our header, and 1 color of the logo would be enough, it would still cost us: 2 possible HTTP requests and 7KB(when using PNG logo). Now with the SVG logo, we have 0 requests and ~6KB.
Our logo will look good on mobile, on an iPhone Retina screen, or on paper when printed – no more worries about it 🙂
Air.