White SVG preview is hardly visible

[Ares9323]

I've been using SVG Explorer Extension for several years to preview SVGs without opening them.

I've just discovered PowerToys because I received an email from Windows Insider Program and I noticed they have the same problem of this extension: Legibility on a white background.

As a Dark Theme user I solved the problem months ago, the gray background makes the light icons pop up and the blacks are not that bad.

It would be great to have a checked background (The classic white and grey used for alpha channel) option to activate from the settings panel, would be useful in PNGs too!

In my opinion previewing SVG without opening them should be a default in Windows, it's a popular format and i'm happy to see you're going in this direction!

[DrkWzrd]

I made an Svg Embedded viewer for Visual Studio and I have this problem in both dark mode with black svgs and light mode with white svgs. First I tought in analyze the svg colors and make the background contrast them, but there is an easier solution, use a checkboard as background. It is not a silver bullet and has problems with some colors (colors of the checkboard, obviously), but improves the visibility of almost all the objects significantly

Dark mode

Light Mode

The white bar is a resize Thumb.

[pratyushtewari]

Actually white svg are not at all visible. We should always have checkered background for the images. That will be amazing.

Even for the thumbnails .. I would want to have the checkered background images.

[wbock]

My issue seems to be that the SVGs are displayed way to small, tried multiple different files from different sources... Is something going wrong with the viewbox handling or so?

[crutkas]

we should mimic what happens with transparent PNG / gifs

[Drakula44]

I can give it a try fixing this. Windows10 way of presenting transparent png files is that just using theme colour as the background colour and I don't know is that good enough in cases where the colour of an object is the same as the background. Maybe a white and grey checkboard is the better option?

[crutkas]

@drakula44 i think one problem is we're mimicking what a browser does (partly cause we are hosted in a browser). Here is a SVG with a white path. The browser renders it white on white.

[crutkas]

With that said, I think checkered may be a decent solution.

Another idea is to have a setting where we allow checkered or targetted color of user choice

[Drakula44]

Maybe something like this

with css style tags background-repeat:repeat; background-image:url(img.jpg) where image is something like this

just a little more carefully chosen shade of grey.

[crutkas]

i think what you're outlining is a decent solution but I'm thinking do Default (white), Pick a color, Checkered pattern. Maybe checkered is the default

[Drakula44]

Understood so in UI should be added options to pick a colour, theme colour or checkboard pattern? If that is so I can give it a try.

[Drakula44]

Yeah, one more question is there a need to have a dark outline around the margin of the picture, like when previewing png/jpg.

[JamesAndersonJr]

IMHO, I think setting any background on otherwise transparent SVG's, and PNG's may look a little tacky, because when you mouseover even a white image with a transparent background, Explorer automatically adds a temporary bluish hue to make the transparency of the image obvious. IMHO it would be a tasteless choice to take that feature away in favor of a static gray and white checkered pattern, as well as allow for images with faux checkered (actually 100% opaque) backgrounds that mimic the pattern and look of the proposed feature. At the very least, let the user decide in settings whether to have 100% transparent backgrounds on SVG's just as transparent PNG's are handled today, or a white, or checkered background if so desired. If you really want to implement versatility, it might be best to add a color chooser with an alpha channel in the settings menu to allow the user to customize the background color themselves to their own unique preferences and tastes.

[JamesAndersonJr]

we should mimic what happens with transparent PNG / gifs

100% Agree with @crutkas

[JamesAndersonJr]

Another idea is to have a setting where we allow checkered or targetted color of user choice

Sorry, I posted a comment on this too without first reading that you had the same idea as me. Great minds think alike! 😉😜

[Drakula44]

Explorer automatically adds a temporary bluish hue to make the transparency of the image obvious.

I see that hue on the thumbnail but I don't see it in the preview pane. For me, transparency in the preview pane is just the colour of the background of the file explorer.

[crutkas]

@drakula44, i think lets solve the preview pane first. I think thumbnail is going to be more of an interesting scenario with opinions

[crutkas]

I think preview pane is the three style setting i outlined

[Drakula44]

Ok, I will create a draft pull request later.

[pratyushtewari]

I am so excited about this PR!! thank you for addressing it.

[Drakula44]

Okay I tried to understand how gui works and I didn't understand. Then I make long break and now I think I understand it. But one thing is not clear how I can get string to be defined in resource.base.h so I can access it with GET_RESOURCE_STRING when I'm defing setting in c++ part.

[ghost]

Is there work on this? It might be worth pulling in a SVG -> PNG converter. Means departing from a pre-configured background color. Would also allow for transparent rendering just like PNGs and GIFs.

[mdtauk]

Maybe something like this

with css style tags background-repeat:repeat; background-image:url(img.jpg) where image is something like this

just a little more carefully chosen shade of grey.

It would be good to offer a light and dark version of the checkerboard pattern - if that is even possible.

[ghost]

I found a suitable and light-ish library for this: https://github.com/svg-net/SVG/blob/062dc7c/Samples/SVGViewer/SvgViewer.cs#L70-L82

Another option is to set the browser rendering background to magenta then remove magenta after: https://stackoverflow.com/questions/33096826/

[koganiz]

It's been a long time since the issue was last updated. Has anybody found a solution\workaround for the white background with transparent svg images?

[JamieRCHI]

It should look like this: (.jpg at top, .svg on bottom) I find it interesting that the svg preview is white in the File Manager, but looks fine here. (In the file manager I see a white square.)

[MsternSC]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

[JamieRCHI]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

And what would that be? I have not found anything that works in Windows 10 yet.

[MsternSC]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

And what would that be? I have not found anything that works in Windows 10 yet.

https://code.google.com/archive/p/svg-explorer-extension/downloads This one worked

[JamieRCHI]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

And what would that be? I have not found anything that works in Windows 10 yet.

https://code.google.com/archive/p/svg-explorer-extension/downloads This one worked

Thanks. I had to disable the svg option in PowerToys. Also after installing this extension, I had to reboot my PC, and reinstall the svg explorer extension a second time. (As mentioned by someone in one of the issues for this extension.) Finally it works. (Also, I found it on Github. https://github.com/tibold/svg-explorer-extension/releases) 👍

[MsternSC]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

And what would that be? I have not found anything that works in Windows 10 yet.

https://code.google.com/archive/p/svg-explorer-extension/downloads This one worked

Thanks. I had to disable the svg option in PowerToys. Also after installing this extension, I had to reboot my PC, and reinstall the svg explorer extension a second time. (As mentioned by someone in one of the issues for this extension.) Finally it works. (Also, I found it on Github. https://github.com/tibold/svg-explorer-extension/releases) 👍

This is on windows 10, and still an issue on 11, correct?

[JamieRCHI]

This seems to be a bigger issue on Windows 11, you can solve this problem on windows 10 by using 3rd party extensions.

And what would that be? I have not found anything that works in Windows 10 yet.

https://code.google.com/archive/p/svg-explorer-extension/downloads This one worked

Thanks. I had to disable the svg option in PowerToys. Also after installing this extension, I had to reboot my PC, and reinstall the svg explorer extension a second time. (As mentioned by someone in one of the issues for this extension.) Finally it works. (Also, I found it on Github. https://github.com/tibold/svg-explorer-extension/releases) 👍

This is on windows 10, and still an issue on 11, correct?

I don't know about Windows 11. Won't touch that with an 11 Meter pole. Even if I could lift it. :) I still prefer Windows 7 but have to use 10 to play the games I like. I am getting way too old to change.

[crutkas]

this is just a implementation issue with how 'we' did it. not an OS issue.

[reFX-Mike]

Ideally, we would be able to configure the brightness of the checkerboard pattern, similar to how Photoshop allows settings between three different versions:

The screenshots people have posted here so far are all too light, IMHO, especially on dark-themed Windows, so a selector would be better. In Photoshop, you can configure the two checkerboard colors yourself, and these drop-down options are just convenient presets.

[stefansjfw]

This work is merged and will be available in the next PowerToys release. Thanks @zanseb for the contribution!

[jaimecbernardo]

This has been shipped for 0.70.0. Please updated to the latest release. Thank you.