PowerToys icon indicating copy to clipboard operation
PowerToys copied to clipboard

Render SVG thumbnails against transparency grid

Open Convincible opened this issue 2 years ago • 7 comments

Description of the new feature / enhancement

When SVG graphics are all-white, it is impossible to see what the graphic is from its thumbnail, as it is rendered against a white background. There should be an option to render SVG thumbnails against a transparency grid.

Scenario when this would be used?

SVG graphics are often pure-white only. A typical use case for SVG is for logos, which often have pure-white versions.

Supporting information

No response

Convincible avatar May 23 '22 09:05 Convincible

~Committed in #25397~

Jay-o-Way avatar May 14 '23 14:05 Jay-o-Way

I take it back - the PR only applies to the Preview Pane, but this is also needed for the thumbnail icons. @stefansjfw @Aaron-Junker

Jay-o-Way avatar May 25 '23 10:05 Jay-o-Way

This isn't quite a dupe. This says something about a "transparency grid" which I presume means a checkered background. But that's not how transparency is handled for other image thumbnails.

Here is an example. I exported an SVG as a PNG file, and put them both on my desktop. They should look the same (other than the icon in the corner). Screenshot 2023-05-30 233934

Note that my Desktop background is not a solid color, so giving me the option of a solid color will not work. It should be transparent.

trlkly avatar May 31 '23 04:05 trlkly

@trlkly is quite right, this issue should apply to any format that allows transparency. So, SVG and PNG both included.

I'm looking for the option to control how the transparency is rendered in the thumbnail.

The issue is that the thumbnail can become useless when the graphic is the same colour as the user interface, against transparency. For instance, a white graphic on transparent bg, against the white user interface window pane.

I'm looking for a setting like: "Render transparency in thumbnails as..."

This could offer options, or it could only offer one of the following options – they are in priority order (the first is the best solution):

  • Smart checkerboard (light grey and dark grey squares, where the shades are determined by averaging the colours in the graphic, extracting the luminance value of this, and offsetting in two directions from this luminance value)
  • Checkerboard (light grey and dark grey squares – always same shade)
  • Solid colour: choose

The solid colour option is not ideal as then the thumbnail does not really reveal that the graphic has a transparent bg. It also becomes useless again when the graphic itself matches that colour. This is why a checkerboard is a pretty standard way of indicating transparency.

Convincible avatar May 31 '23 07:05 Convincible

You're not agreeing with me, though. What I want is actual transparency. I want it to match the PNG. I do not want a solid color background, and I do not want a checkerboard background.

If you want to have multiple options, that would be fine. But one of those options should be to depict transparency as actual transparency. I hate boxes around images.

trlkly avatar May 31 '23 08:05 trlkly

@trlkly both of our (actually opposing) desires are served by this proposal, as the user would be able either to turn ON the grid effect or turn it OFF which should render as you want it i.e. as actual transparency

Convincible avatar May 31 '23 08:05 Convincible

Idea for devs: Use an rgbA color combined with one optional checker pattern. The grid should be alternating 100% color and 100% transparant.

Jay-o-Way avatar May 31 '23 10:05 Jay-o-Way