Logo corners are chopped: can this be prevented?

[holta]

When viewing the internetarchive logo on the left side of an IIAB home page, the artwork's corners are removed (whited out), instead of showing the full (square) logo here:

https://github.com/iiab/iiab-admin-console/blob/master/roles/js-menu/files/menu-files/images/Internet_Archive_logo_and_wordmark.svg

Why is this happening?

Can this be prevented?

Context: This arises in the Chrome browser on Android (and likely in all other browsers, on all OS's?) when this new "Internet Archive Decentralized Web" IIAB playbook has been installed:
https://github.com/iiab/iiab/tree/master/roles/internetarchive

Ref: #1831

[holta]

These 3 logos face the same problem — their corners are being cut off:

• https://github.com/iiab/iiab-admin-console/blob/master/roles/js-menu/files/menu-files/images/en-wikisource.png
• https://github.com/iiab/iiab-admin-console/blob/master/roles/js-menu/files/menu-files/images/es-wikisource.png
• https://github.com/iiab/iiab-admin-console/blob/master/roles/js-menu/files/menu-files/images/fr-wikisource.png (including subtitle "la bibliothèque libre")

This one (used by kn-wikisource_kn_all.json) does not:

• https://github.com/iiab/iiab-admin-console/blob/master/roles/js-menu/files/menu-files/images/410px-Wikisource-logo.svg.png

[holta]

@floydianslips & @tim-moody today discussed several possible approaches to mitigate the worst of this cropping/chopping of logo corners (e.g. when a square/textual logo is all that's available). The issue likely results from this line within the CSS:

border-radius: 5px

Not easy figuring out what to do here:

• While black-on-white logos like the 4 discussed above (for Internet Archive & en-wikisource) are certainly begging for an opt-out to avoid corner-cropping/rounding in these cases (which remain elegant) that's not however true in the general case for all JPG/PNG/GIF's — where this iOS/RACHEL-like corner-rounding seems desirable in most all cases.

On the topic of mobile phones and more generally grid views of such logos/icons (if that ever transpires, along the lines of #1866, with description+metadata on demand via mouseover/hover or similar?) it's worth noting that...

• iOS mandates apps have squarish logos
• recent versions of Android mandates that apps have circular logos [which can make for very awkward-or-at-least-very-small logos with limited screen real estate, when a square peg is put in a round hole ;)