Page MenuHomePhabricator

Chrome displays PNG thumbnails of SVG with transparent backgrounds on a black background
Closed, InvalidPublicBUG REPORT

Description

Steps to Reproduce: If we look at a .svg like this https://commons.wikimedia.org/wiki/File:Symptoms_of_coronavirus_disease_2019_2.0.svg and we look at the .png version it is on a black background and is not very useful https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Symptoms_of_coronavirus_disease_2019_2.0.svg/800px-Symptoms_of_coronavirus_disease_2019_2.0.svg.png

Expected Results: The .png should just us a usable image....

Event Timeline

Are you viewing in Chrome?

Examples of Firefox and Edge displaying

Edge
edge.png (835×1 px, 380 KB)
firefox
firefox.png (867×1 px, 715 KB)
chrome
chrome.png (802×1 px, 337 KB)
Peachey88 renamed this task from svg backgrounds to Chrome displays PNG versions of SVG with transparent backgrounds on a black background.May 5 2020, 10:02 AM

This is up to web browsers and nothing that can be changed or influenced by Wikimedia code as there is no way that a website can tell a browser "please use background color XYZ when displaying an SVG file which itself has a transparent background".

But we have a line that says "This image rendered as PNG in other widths: 200px, 500px, 1000px, 2000px." Could those not have a white background?

It is interested that we have this with a white background https://upload.wikimedia.org/wikipedia/commons/9/96/Symptoms_of_coronavirus_disease_2019_2.0.svg

We have the French version with a checkered background https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:VideoWiki/Maladie_%C3%A0_coronavirus_2019#/media/Fichier:Symptoms_of_coronavirus_disease_2019_2.0.svg But when you click on that version it switches back to English.

So I cannot get a screen shot of the French version to save as a .png to reupload to commons to use in the French video on COVID19. Let me try with a different browser.

Aklapper renamed this task from Chrome displays PNG versions of SVG with transparent backgrounds on a black background to Chrome displays PNG thumbnails of SVG with transparent backgrounds on a black background.May 5 2020, 2:12 PM

But we have a line that says "This image rendered as PNG in other widths: 200px, 500px, 1000px, 2000px."

Argh, I somehow really missed that this is about the PNG thumbnails, so my previous comment does not make much sense, sorry!
Alright, looks like the PNG thumbnail takes the transparent channel from the SVG.

Could those not have a white background?

What is the actual, underlying problem and use case?
When do you open PNG thumbnails isolated, as a file only, in a separate browser window? Why don't you for example open the SVG itself instead?

You could strip the transparent background and replace it by a color. That makes it look bad on every and any background that does not have the very same color. Hence it is not a good idea. You could contact Google Chrome developers and ask them to implement a checkered background or such if a PNG has a transparent alpha channel. Again, nothing to fix on the Wikimedia code side by making PNG thumbnails non-transparent and look bad if the page background does not match.

We are using these in videowiki, such as here on Fr WP https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:VideoWiki/Maladie_%C3%A0_coronavirus_2019

I guess I can simple open it up in Edge. Hit print screen. Crop it and upload it with a solid color background and than use that new version rather than the .svg.

@Doc_James: Okay but that does not explain where and how to see a problem? The page itself has no black background; if I click on the thumbnail in https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:VideoWiki/Maladie_%C3%A0_coronavirus_2019#Sympt%C3%B4mes_1 it opens the MediaViewer at https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:VideoWiki/Maladie_%C3%A0_coronavirus_2019#/media/Fichier:Symptoms_of_coronavirus_disease_2019_2.0.svg which displays a checkered background here in Chromium 80 (which... surprises me, because I do not know why that happens).
Only when I open https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Symptoms_of_coronavirus_disease_2019_2.0.svg/langfr-1280px-Symptoms_of_coronavirus_disease_2019_2.0.svg.png (which requires me to right-click on the image to "Open in new tab") I see a black background. That's probably not a common action that lots of people perform. But I guess there are steps that I am not aware of?

Apologies. You can see the issue here https://videowiki.wmflabs.org/fr/videowiki/Wikip%C3%A9dia:VideoWiki/Maladie_%C3%A0_coronavirus_2019?wikiSource=https://fr.wikipedia.org&viewerMode=editor

When you click on "3 Symptomes". I have asked Pratik what can be done on the Videowiki end to fix this.

I guess you could add background-color:white to the CSS of the class carousel_image

Thanks Aklapper will ask them to see if they can figure that out :-)