Replace PNG platform icons with SVGs for better scalability

[Calinou]

Describe the project you are working on

The Godot editor :slightly_smiling_face:

Describe the problem or limitation you are having in your project

The current platform icons in each platform/ folder are 32×32 PNGs.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Replace PNG platform icons with SVGs (reference size 32×32, but scalable to any resolution).

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

platform-icons.zip (licensed under CC0 1.0 Universal, nonwithstanding trademark rights)

Each icon has specific colors for easier visual grepping. Translucent console icons are also included, which can be used in case we go forward with https://github.com/godotengine/godot/pull/42359.

If this enhancement will not be used often, can it be worked around with a few lines of script?

No, as platform icons are hardcoded in the editor binary.

Is there a reason why this should be core and not an add-on in the asset library?

This is core editor functionality.

[SIsilicon]

I think it'd be better for MacOS if you use its finder icon rather than the apple logo, which implies all apple products, including iOS. Perhaps something like one of these. Or instead of the icon, its name. This is straight from the Wikipedia.

Also, why does the Linux icon look so weird? Is it the background? And where's UWP?

[Calinou]

Also, why does the Linux icon look so weird? Is it the background?

It's dark gray on a dark gray background, forgive me for the preview.

[aaronfranke]

Your icon set is missing an icon for UWP. Android/Windows/HTML5/the consoles look good to me.

The Apple logo is ambiguous because Godot supports both macOS and iOS. The current icon already in Godot is already quite good, it's the official icon in Big Sur. If an SVG version is desired, we can create an SVG version without drastically changing the appearance (keep the shapes and color scheme as similar as possible).

Lastly, I'm a sucker for Tux, I prefer the original. It's available in SVG format.

[aaronfranke]

@Calinou I couldn't find an SVG version of the macOS Finder icon, so I decided to trace it in Inkscape. This turned out way better than expected considering I'm a noob at Inkscape. It's simplified compared to the PNG that Apple provides, there's no shadows around the icon and no shading on the eyes and mouth, but that might not be noticeable anyway at small scales.

macos.svg.zip

[SIsilicon]

@aaronfranke Looks pretty good. But considering the style of the other icons, making this icon flat shaded like the others would make it look more consistent. Like this. Here's what it would look like with the other icons (made Tux a lil darker). While I'm at it, here's the Linux icon traced up and simplified. macos_and_linux.zip

I also checked, and UWP technically doesn't have a logo; since it's made for deploying across windows 10 powered devices, it would make sense to keep the logo we currently have for it.

[aaronfranke]

Alright, here is a flat SVG version. The color on each side is the average color of the gradient ends. Interestingly, removing the gradient significantly reduced the image size (1.7 to 1.2 KiB).

macos-flat.svg.zip

[SIsilicon]

I feel like those outlines don't belong in the icon. None of the others have it...

[aaronfranke]

macos-flat-noborders.zip

[SIsilicon]

Ok, so with a lil bit of coding, I emulated what the current icon proposals would look like in practice. I also thought I'd see what it would look like if the UWP logo used the Windows Store icon instead. In my opinion, the iOS logo looks weird compared to the others, since it just looks like a copy of the text beside it, but the iOS logo really it's just that so, maybe if it had a background color? ¯\_(ツ)_/¯

[SIsilicon]

I have compiled together an array of potential icons that could represent UWP, including the current one. I tried them all, and I'm really feeling for the third one. You know what's funny? The windows emblem on the first icon looks bigger than the second, but their actually both exactly the same size! 😆 Here's what it looks like with the third canidate.

[aaronfranke]

@SIsilicon How many of those are available in SVG format?

[SIsilicon]

@aaronfranke All of them. uwp_logo_canidates.zip Only the third one shows up in a render. Open it in an app like Inkscape to see them all.

[projekt2502]

Why not remove the texts of Nintendo Switch and Xbox SVGs?