Verify that icon looks correctly

[rugk]

After #5 and after some back and forth I am not sure whether I got the icon right now.

Because on two Linux installations (with Firefox installed) it is always displayed incorrectly as a yellow thing:

On Windows it is however shown correctly, similar to this PNG file.

How does it look on your device (browser/OS)?

[elrido]

I will try to create some screenshots using various browser / OS combinations in browserstack during this week and post them here.

[rugk]

Thanks.

[elrido]

Here they are:

MacOS Chrome 52

MacOS Firefox 48

MacOS Opera 39

MacOS Safari 8

Windows 10 Chrome 52

Windows 10 Firefox 48

Windows 10 Edge 14

Windows 8.1 IE11

Windows 8 IE10

Ubuntu 16.04 Firefox 48

Ubuntu 16.04 Chromium 51

Nexus 6P Android N

Galaxy S7 Android 6

iPhone 6S Safari

iPhone 6S Chrome (yes, here we have an ugly bootstrap CSS glitch)

Any combination missing that you would find interesting?

BTW: The logo with text still has the odd Inkscape syntax for the radial gradient, while I had manually simplified the gradient for the small logo. Just compare the XML of the two files...

[rugk]

Actually I know that the gradient for the simplified icons looks okay. The issue is about the big icon.

[rugk]

BTW: The logo with text still has the odd Inkscape syntax for the radial gradient, while I had manually simplified the gradient for the small logo. Just compare the XML of the two files...

It has the percentage version if you mean this - or do you mean another commit?
If I look at your recent edit I see you changed it back to the "odd Inkscape syntax" with pixels again...

[elrido]

First let me apologize for misunderstanding which file you were talking about. I have now reread all posts and have a theory what is actually going on:

If you look at just the SVG in any browser in 100% resolution, you notice that it is designed for 2500 pixels width and it looks correct. When you manually export a PNG in Inkscape and reduce it to 500 pixels width it still looks OK, as apparently Inkscape renders it in the native resolution and scales it down afterwards. But when you display the logo in the README.md (or on the privatebin.info page), embedded in HTML with an override of the width set to 500 pixels, the browsers render it directly at 500 pixels and it looks awful (in those that do actually support SVG, older IE will simply display an error symbol).

Unfortunately although the gradient is given in relative numbers, the center position of the radial gradient is a fixed pixel position and this is not scaled down when the SVG is rendered in the browsers. Hence the gradient is there, but outside of the hexagon and therefore not visible.

That was the problem I also had with the icon. As a solution I suggest that you change the logo with text SVG to 500 pixels width (in the image properties of the file menu in Inkscape) and if necessary reposition the radial gradients center. Then we can replace the logo in the repo and the info page with it and it should look the same in all SVG supporting browsers.

[rugk]

Hmm, but I think the size is not a problem. It is not only about the logo with text, it is also about this icon (full view) (which is already 500px width) and - as said - it only looks bad on Linux, which is most surprising.

So it does not matter in what size/up/downscaling I look at it, it always looks bad. The only difference seem to be between Windows and Linux. How does it look in your case?