Real vector SVG icon with background (low contrast issue is fixed)

[unclechu]

For first I attach screenshots that demonstrates low contrast with dark Github and/or Firefox themes.


I also have realized that SVG icon wasn't really vector, it had raster background, so, I redraw it, also I calculated sizes and positions (see spreadsheet attachment if you want to see details) and now intervals and sizes is precise.

So now background of "window" object filled with white color and low contrast issue is fixed.

vtr-sizes.ods.gz (contains few custom functions in macro section).

[unclechu]

@Croydon bump

[unclechu]

You could look at new icon here: https://github.com/unclechu/vertical-tabs-reloaded/blob/feature/real-vector-icon-svg/dev/icon/Icon.svg

[Croydon]

Oops, you are right, the logo version aren't really svg files right now. Thanks for you work so far!

However, I still see a few issues here. Most importantly, making the background white is rather a workaround than a good solution. I don't know how to do that, but the icons should be made the way, that the svg-fill CSS atribute can by applied to it and the icon will take the color for these parts which are per default black. The background should stay transparent. This would look much more native.

Have a look here: https://browser-config.herokuapp.com if you change svg-fill the icons will adopt the color.

@unclechu Do you have experience how to do this?

Also, last but not least, it would require the same work for the small variant for the icon (without the "tab sidebar" element on the left).

[unclechu]

@Croydon now it's done, small icon have been redrawn too, background is transparent and fill-color set to 'undefined' for everything (opacity set to 50% for lines in left part of big icon). Please try it and let me know if everything is okay.

[unclechu]

But, if you ask me, it will never fix low-contrast issue for github readme page for example. I'm not sure how it can be fixed using transparent background, maybe it would be better to use alternative version of this icon with filled background for cases like that.

[unclechu]

I can add alternative ones if you agree it would be a good idea.

[Croydon]

I have updated the readme and filled a bug for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1416400

I will wait for progress on this bug

[Croydon]

Is there a way to "soft set" the color? A default value of colors which is easily overwritten by the fill attribute?

[unclechu]

@Croydon I believe it's black color by default and don't know if "soft set" is possible.