• Rife WP Theme
    • Rife PRO
    • Rife FREE
    • Demos
    • Pricing
    • Features
    • Reviews
    • Help
      • Documentation
      • Change log
      • Rife Free Child Theme
    • Tutorials
  • Rife Elementor Ext.
  • Blog
  • Contact
Try Rife!
Updated: November 2, 2018 by Air. 0
Tips

SVG logo on WordPress site

SVG logo on WordPress site
Updated: November 2, 2018 by Air. 0
Tips

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:

  1. Adding as standard HTML image tag <img src="file.svg" alt="Scallable image" />
  2. 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 🙂

If you Like it, Share it!

Rife Speed SVG

Air.
Lead programmer in Apollo13Themes, often can be seen on Apollo13 support. Working hard on making themes fast and reliable in ever-changing WordPress environment. He writes articles for Apollo13Themes blog, mostly concerning technical stuff, updates to themes and opinions about WordPress industry situations. Air. is with Apollo13Themes almost from the beginning. Rife Theme FTW!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

WP Resources

Recent Posts

10 Much-Needed SEO Tools for Any WebmasterJuly 30, 2022
10 Eye-Catchy Themes for Photographer PortfoliosJune 27, 2022
  Seven Confirmed Web Design Trends in 2022May 27, 2022
10 Cool WordPress Themes to Create a Niche StoreApril 29, 2022
10 Outstanding Tools for WordPress DevelopersMarch 27, 2022

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

We know that our clients are the key to our success and that is why we decided to make support as our strongest value.

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

From the Blog

10 Much-Needed SEO Tools for Any WebmasterJuly 30, 2022
10 Eye-Catchy Themes for Photographer PortfoliosJune 27, 2022
  Seven Confirmed Web Design Trends in 2022May 27, 2022
10 Cool WordPress Themes to Create a Niche StoreApril 29, 2022
10 Outstanding Tools for WordPress DevelopersMarch 27, 2022

Get news & promotions

Be the first to get info about new Designs, new features, and special promotions!
© All Rights Reserved Apollo13Themes - Wordpress Premium Themes.
We use blazing fast Kinsta hosting and you?