How to properly use SVG in Logo?

vasiliykuleshov

Good morning!

How to properly use SVG in Logo?

Now I'm using the Safe SVG plugin for sanitize all imported SVG's to Media Library of the Wordpress.

I have already tried to use a vector SVG logo.
Adding him from Media Library
to Header settings > Logo + Variant light + Variant dark.

In the Chrome browser, the vector SVG logo is displayed normally, has a normal size similar to its raster PNG version. In the Edge browser, otherwise, there it is very small.

I suspect that this is due to the lack of specific dimensions in CSS. And different browsers change the size of the logo in their own way.

I hope to receive guid from you on the use of the vector SVG logo.

Thanks!

Air

Hello :-)

I had no experience yet with SVG logo before. However there seems to be bug in IE and Edge https://gist.github.com/larrybotha/7881691

If you will remove width and height attribute from your svg image it starts to behave proper. In our logo image is used as background image and that is why this solution will apply.

Just edit your image in notepad or other editor and remove width="425.1967773px" height="56.6933594px" and save.

With kind regards.

vasiliykuleshov

Thanks Air, it worked! :-)
It seems that now the logo is displayed in all browsers normally.
Attributes "viewBox" and "enable-background" I left as is. Although the numbers indicated there are not very clear to me, except for the first two zeros.

In the meantime, I discovered a strange behavior in the subsection Header settings > Logo when choise the SVG logo. At the same time in the subsections Variants and Sticky Header behavior normal. I'll try to describe it in this the topic, but not now, maybe tomorrow night.

Good night!

Air

That is great:-) I am waiting for new information from you.

With kind regards.

vasiliykuleshov

It looks like I'll have to use a PNG logo. :-(



1.

It seems that now the logo is displayed in all browsers normally.

I was wrong.
The correct sizes in all browsers — are probably yes.
Displayed in all browsers — no.

I had time to test SVG logo for only a few devices.

Displayed:
All newer desktop browsers IE-Edge-Chrome-Firefox-Opera on PCs with newer Windows;
IE and Edge on Lumia's with Windows mobile;

Not displayed (as minimum):
Safari on iPhone 5S with iOS 9.3.2;
Safari on iPhone 4S with iOS 9.3.5;
Chrome on Samsung Galaxy A3 with Android 7.0;
Chrome on Sony Xperia E5 with Android 6.0;
Chrome on Huawei Honor 6 with Android 6.0;
Chrome on LG G4C with Android 5.0.2;

However, I understand that these are old devices.



2.

In the meantime, I discovered a strange behavior in the subsection Header settings > Logo when choise the SVG logo. At the same time in the subsections Variants and Sticky Header behavior normal.

When i choose SVG logo in all subsections Logo, Variants, and Sticky Header
— logo not displayed nor where.

When i choose SVG logo only in subsections Variants and Sticky Header, and I leave empty in subsection Logo
— logo displayed as text everywhere.

When i choose SVG logo in subsections Variants and Sticky Header, and choise JPG/PNG logo in subsection Logo
— SVG logo displayed in Variants and Sticky Header,
and on pages where variants logo is not choose, displayed JPG/PNG logo.

Since in the latter case SVG logo is displayed (because I use the variants), I temporarily it and use.



3.

When the page is scaled more than 110%, the logo disappears.
When the page is scaled less than 100%, the logo remains in place, as expected.
Tested in newer Edge-Chrome-Opera desktop browsers.



I do not require you to support SVG, when browser developers themselves did not. I just pay attention to it. If SVG support improves in the future, I will gladly use it.

Thank you for your attention to this!
Have a nice day!

Air

Hello :-)

Thanks for detailed description.

vasiliykuleshov said: When i choose SVG logo only in subsections Variants and Sticky Header, and I leave empty in subsection Logo
— logo displayed as text everywhere.

Yes, you have to provide default logo. If there is none, it will switch to text logo, so it is proper behavior. Light, dark, sticky varaints can only overwrite default logo.

vasiliykuleshov said: When i choose SVG logo in all subsections Logo, Variants, and Sticky Header
— logo not displayed nor where.

Do you mean in customizer or on front-end of your site?

vasiliykuleshov said: When i choose SVG logo in subsections Variants and Sticky Header, and choise JPG/PNG logo in subsection Logo
— SVG logo displayed in Variants and Sticky Header,
and on pages where variants logo is not choose, displayed JPG/PNG logo.

I think it is correct behavior or am I missing something ;-)

vasiliykuleshov said: I do not require you to support SVG, when browser developers themselves did not. I just pay attention to it. If SVG support improves in the future, I will gladly use it.

I had plans on taking closer look at SVG in various places of layout soon, so I will investigate it for sure.

From what I see now, WordPress have problems with calculating proper size of SVG image and it return me 0 for width and height. I don't know is it cause we have removed width and height attributes, or different issue, but it is worth investigating.

I have tried uploading image with all attributes, but it also doesn't help now, what is strange, as it worked previously.

SVGs seems to be more problematic then they should :-)

With kind regards.

Air

I have read some more about SVG and WordPress and it looks that it would require much more attention then we did previously in first answer.

So yes, for now I would rather advice to use PNG as logo image.

I am adding this to my long TODO list ;-)

With kind regards.

vasiliykuleshov

Hello!

Air said: Yes, you have to provide default logo. If there is none, it will switch to text logo, so it is proper behavior. Light, dark, sticky varaints can only overwrite default logo.

So that's how it work. Okay. :-)

vasiliykuleshov said: When i choose SVG logo in all subsections Logo, Variants, and Sticky Header
— logo not displayed nor where.

Air said: Do you mean in customizer or on front-end of your site?

I mean the logo disappears on all pages of the site. Not displayed nor text-logo, nor SVG-logo. Empty place instead of the logo. This is the case only if in the Logo subsection I choose specifically SVG-logo.

Only under one condition I manage to make the SVG-logo appear now
— this is (1.) choise raster JPG/PNG-logo in subsection Logo (2.) choose SVG-logo in subsections Variants and Sticky Header (3.) use on all pages of the site only specifically Variants in headers.
However, on devices with iOS and Andoid the SVG-logo still disappears. :-(

Air said: I had plans on taking closer look at SVG in various places of layout soon, so I will investigate it for sure.

Air said: I am adding this to my long TODO list ;-)

I'm glad to know. I think we all understand the advantage of vector graphics in GUIs. Especially when there are so many different devices, screen resolutions. Moreover the SVG has a powerfull potential — animations, CSS, etc.

Thank you for your answers and good luck in development! :-)
As for me, I temporarily return to the PNG.

Air

vasiliykuleshov said: I mean the logo disappears on all pages of the site.

Yes, this caused by WordPress not being able to calculate width and height of SVG. We will have to make it work on our own, so for now SVG are not usable as logo in theme unfortunately.

I think we were pretty lucky to make it work on first attempt, while it shouldn't work with current implementation ;-)

With kind regards.

Air

Hey :-)

I know it was a long time, but I wanted to inform you that since Rife Pro 2.0.0 there is full support for SVG logos.

You can read more about it here https://rifetheme.com/help/docs/customizing-the-theme/header/svg-logo/

With kind regards.

vasiliykuleshov

Hello :-)

You guys are the best! Thank you for implementing this! And Air, thanks for remembering this topic!

Air

Yeah, it took some time, but I had this topic marked for the last 11 months. There were so many other things done in the past year, that finally, I could get to fun things like SVG support.

This case alone required a few days of attention to be done right:-)

Thanks for the coffee ;-)

Have a great week!