1. Home
  2. Docs
  3. Customizing the Theme
  4. Header Settings
  5. SVG logo

SVG logo

These settings are only available in Rife Pro since version 2.0.0.

An SVG logo is the best way to keep your logo always sharp, no matter on what device your site is displayed. It also can make your site slightly faster, by reducing the number of requests that are needed to display your website.

Enabling SVG upload

Before you will be able to use SVG logo, you have to enable WordPress support for it. By default, uploading SVG images are not allowed, due to security reasons(we will touch on this later).

To enable SVG upload please install Safe SVG plugin and activate it.

Enabling SVG logo feature

To enable this feature go to Appearance → Customize → Header Settings → Logo → Use SVG logo.

Enabling this option will hide option to upload Image for HIGH DPI screen as it is not needed, cause SVG images are always sharp.

You can upload your SVG logo in Image option in the same panel.

Adjusting SVG logo size

Because SVG files can be scaled without limit, it will always use maximum width set in Max width of logo on desktop and Max width of logo on mobiles options. In other words, these options set a real width of your logo in the header when used with SVG. Don’t use Height setting, as it will not have the effect that you intend.

SVG file details

There are 2 things that are required for SVG file to work properly in theme:

  1. your SVG file should have viewbox param as it stores proportions of your image, and without it can be displayed in a distorted way
  2. Make sure everything is converted to paths in your SVG.

Things to be aware with SVG files

SVG and site affecting each other

The SVG format is more of document type then image type, and as such, it has some features that can affect your site.

For example, depending on the generator you will use, each path in your SVG file can have assigned class param, and possibly added CSS block.

These means that either SVG CSS could affect other parts of your website, or your site CSS could affect SVG parts when not intended. It is possible but rather rare to happen.

The SVG logo is inlined in theme

If you enable SVG logo, then image used will be part of the code of your website, not a separate image like with classic logo.

Below you can see example SVG file but without details of paths 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 various, class, id, and CSS block, that as we have said before could come in conflict with your website. Although generators often use single letter ID and classes, it is good to be aware of it.

Don’t use SVG found on the internet

Like we have said before, SVG is more document type, and as such can contain scripts, that can make your site vulnerable.

If you want to use SVG make sure you have it from a verified place.

SVG and header color variants

When you are using different logo color for sticky, light or dark header variants there are 2 approaches to choose from when using SVG file.

Upload separate varaints of your logo

If for example your uploading one SVG file for your normal logo, and another for the sticky header, then make sure that each of those files have different set of IDs and Classes, as otherwise they can affect each other and both will look the same in the end.

Overwrite colors with CSS depending on header color variant

This approach is better in many aspects:

  • you don’t duplicate code,
  • you have control over your colors right from the panel,
  • you can use only one file for 4 different variants,
  • or even change logo color depending per page!

All with the power of custom CSS. We can help you with this on our support forum if you want to play with SVG logos.

For example on our website we have used such CSS to change colors of the logo when using light header variant:

.a13-light-variant .svg-logo path.b{
	fill: #fff;
}
.a13-light-variant .svg-logo path.c{
	fill: #fa4f7b;
}
Was this article helpful to you? Yes No