SVG logo not displaying in Chrome or MS Edge

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
I really hope someone can help and provide some guidance please.

After just recently updating to WHM/cPanel 106.0.4 and seeing more consistent warnings about Paper Lantern being removed soon, I decided to finally bite the bullet and switch all accounts to the newer Jupiter theme.

One thing I definitely wanted to have in place for users to see right away, before they start hitting me with tickets about the change, is to have my logo in place.

In WHM > cPanel > Customization with Jupiter Theme selected, I uploaded my SVG logo file, which does include the width and height in the code as recommended.

It displays perfectly in Firefox , in both WHM and cPanel.

However, it does not display in Chrome or Microsoft Edge , in neither WHM nor cPanel.

I can tell it is there "invisibly" and trying to render. For example, in cPanel a quick click & drag of the mouse over the logo area displays the rectangle of the "invisible" image, and clicking that area correctly takes me to the main cPanel start page. Also, viewing the page source shows the same code in all browsers for the cp-main-menu-container and cp-layout-wrapper and cp-layout-header cp-layout-header--with-main-menu , including my logo-alt-text and logo-src which contains the svg code.

I'm confounded at this point.

Does anyone have any ideas as to why the svg logo only displays in Firefox and not Chrome or Edge?

Thank you for any knowledge and/or suggestions.
 
Last edited by a moderator:

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
PS - in case this matters and/or looks incorrect, here is the code from my SVG file with the long string of image data removed, since I assume the important parts are the start and the end:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="162" height="100" viewBox="0 0 162 100">
<image id="Shape_5" data-name="Shape 5" x="1" y="3" width="160" height="94" xlink:href="data:img/png;base64,

(removed long string of data of the image)

"/>
</svg>
 

cPRex

Jurassic Moderator
Staff member
Oct 19, 2014
13,250
2,085
363
cPanel Access Level
Root Administrator
Hey there! I have two possible thoughts on this one:

-some browsers don't like comments with the <1-- --> format, so you might want to make sure those don't exist in that particular SVG.
or
-if you're encoding a PNG inside an SVG, which looks possible from the "img/png" portion of your paste, that could also be an issue for some browsers.

Could you check both of those and see if that gets things working well?
 
  • Like
Reactions: Metro2

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
@cPRex - thank you for the response! I'm not "svg savvy" so I'm going to make some time tonight or tomorrow to dig in further / learn. Sounds like you've got me pointed in the right direction and now I need to brush-up on how to create it proper. I used my Photoshop > Export to SVG to create it. The only < brackets in the file are the ones that I included in my previous post, and there are no -- in the code, so I'm guessing your second suggestion is the more likely culprit. I'll update this thread when I'm able, in case I can solve it and possibly help someone else too.
 

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
I'm stumped. :(

The SVG logo file opens perfectly in all browsers on it's own (e.g., right-click logo.svg and open with Chrome / Edge).

I also pasted the SVG logo code directly into a plain HTML file named 1_svg_test.html , uploaded it to one of my sites, and the logo displays perfectly in all browsers when viewing that as well (e.g., example.com/1_svg_test.html).

Displays perfectly in cPanel when viewing with Firefox.

It is only in cPanel that the logo does not display in Chrome or Edge.
 

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
It gets more bizarre...

If I right-click the invisible image in Chrome or Edge, and choose "Open image in a new tab" , the logo suddenly displays.

I've made the following screenshots to demonstrate.

1. Logged into cPanel and hovered mouse over "invisible" logo:
1_svg_cpanel.png

2. Dragged mouse across the logo section so we can clearly see it is present despite not displaying:
2_svg_cpanel.png

3. Right-click on the invisible logo and "Open image in a new tab" :
3_svg_cpanel.png

4. Immediately the SVG becomes visible cPanel. (Obviously that's just a test logo I made)
4_svg_cpanel.png

So... my SVG:

Displays without issue in ALL browsers on local machine. :)

Displays without issue in ALL browsers when viewing a web page with the SVG code in it. :)

Displays without issue in cPanel with Firefox :)

Is invisible in cPanel with Chrome and Edge UNLESS I right-click and select Open image in a new tab, then immediately becomes visible. o_O

Conundrum.

Does anyone have any experience with this that they can please share?

Can anyone who has had success with adding their logo to cPanel with Jupiter please tell me how you created your SVG?

Big thanks to anyone who replies with anything that might help!
 

Metro2

Well-Known Member
May 24, 2006
575
94
178
USA
cPanel Access Level
Root Administrator
@cPRex - thanks for checking with the UI team (I was wondering if there was a way to reach them without creating a ticket). I will take your advice and create a ticket within a few days and post the ticket # here, but right now putting out too many other fires / priorities. I don't intend for this to become another "Jupiter hate" thread at all, and I have not participated in those threads, but I must say I'm just not a fan of it. The left sidebar is (for me) wasted space, and obviously (for me) it was much easier to always have my logo displayed correctly in Paper Lantern. I'm trying to keep up with cPanel but the pace is break-neck for a sole-proprietor such as myself with no employees or help, with a few servers and about 400 customers / hosting about 700+ sites when including their Addon Domains, tight budget and all. Fielding responses to AutoSSL tickets from customers already adds enough to the day. I digress... I'll submit a ticket regarding the SVG logo issue as soon as possible in the coming days and will report back. Thanks very much for your tireless efforts here!