SVG logo not displaying in Chrome or MS Edge

[Metro2]

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.

 

[Metro2]

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]

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?

 

[Metro2]

@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.

 

[cPRex]

Sounds good - let us know!

 

[Metro2]

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]

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:


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


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


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


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.

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!

 

[cPRex]

Well that's interesting - I really don't know what's happening with that, even after speaking with the UI team. Can you make a ticket and reference this thread so we can check it out?

 

[Metro2]

@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!

 

[cPRex]

All good feedback for sure - I've passed that along.

 

[namehero]

Gonna save everyone's sanity: Chrome not rendering SVG referenced via <img> element
TLDR: Open with notepad, find "xlink:href="data:img/png;base64," replace "xlink:href="data:image/png;base64," save.

 

[Metro2]

@namehero - Thank You! That worked!