Inconsistent backdrops

[MolassesLover]

About

Throughout all icons there are two types of backdrop shadows:

1. Merged

2. Separate

The Issue

The first is incredibly hard to notice, since the backdrop is extremely subtle. It would arguably be only realistically visible with an OLED or QLED display. Because of this I have inadvertently contributed a ton of icons that do probably not utilise the appropriate backdrop settings, and have maybe even have two layers of backdrops.

You can see here that the Blender, and UPBGE icons have a much darker backdrop shadow, relative to other icons. Some icons like the clock icons don't have a noticeable backdrop at all.

The Fix

The best way to fix this is to standardise a way of using backdrop shadows. I think keeping the backdrop separate would be the best, as it allows for easier alteration of gradients.

Maybe we can have a branch specifically to overhaul the backdrop shadows? This could be a massive issue in the long-term.

Sorry if I missed anything, I still don't have too much experience with .svg files.

[alvatip]

Thanks for noticing this @MolassesLover ! 👍
There is indeed some inconsistency there, but that is not a big deal! I will have a look to make a standardise backdrop shadows, then I will write a script to find and replace them all at once without having to do it manually 😉

Blender and UPBGE backdrops are more noticeable because the offset and darkness of the backdrop shadows are more important compare to the other.

It is also good to know that in fact merged and separate are usually the same, when optimizing the icons, Inkscape will just group some shape such as the background and the backdrop shadow to spare some text and have lighter .svg. They can be separated with ctrl + g when selected

[MolassesLover]

My bad, I'll use the outline view now, and keep an eye on the objects/layers. Also, how do you plan on making the script?

[alvatip]

Should be fixed now !! 👍 I do not think I missed any of the icons nor made mistake, but we will see with time and uses.
For my script, I used the 'sed' command with a regex to select only the shadows of most of the icons (something like 260 on 300) and replace it with the SVG code of the new shadow. Then I modified the other 40 manually 😛

This is basically what I came up with:

#!/bin/bash
new_shadow='<rect transform="matrix(.99138 0 0 1 .072989 .0019055)" x=".79375" y=".90545" width="15.346" height="15.346" rx="3.0526" ry="3.0526" fill="#2e3440" filter="url(#filter1178)" opacity=".45" stroke-width="1.2489" style="mix-blend-mode:normal"\/>'

for icon in $HOME/github/Nordzy-icon/src/apps/scalable/*; do
	sed -i "s/<rect.*width=\"15.346\" height=\"15.346\" rx=\"3.0526\" ry=\"3.0526\" fill=\"#2e3440\".*\/>$/${new_shadow}/g" ${icon}
done

[MolassesLover]

That's amazing work, thank you so much!

It's fixed but now the issue arises that all of the backdrop shadows are #2e3440. This matches the Nord colour scheme, of course, but ends up making the theme really hard to read with Nordic GTK.

Do you think the shadows should be black? Or should they be kept as they are now?

[alvatip]

I will try putting them in a classic black to see how it looks 😉

[alvatip]

I created a new branch where i modified all the backdrop shadows with a full black. Could you try this dev branch ? My desktop does not have a full background with nord color so I don't have the issue... 😛 Thanks

[MolassesLover]

It works fine! Though, the black seems to be at 45%, which, in my opinion, I find a bit too strong. I would prefer it if you set it to 15%, which is what I used (I think).

[alvatip]

That is better, but you are right, the shadow is too strong in opacity. I will try 15% as you suggest!

[MolassesLover]

Awesome, thank you so much!

[alvatip]

Still in the black_shadows branch, I updated the opacity to 15%. Could you give it a try ? Thanks

[MolassesLover]

It looks perfect! Thank you so much, again.

Please let me know if any of my pull requests have the wrong backdrop, I'd fix it in a heartbeat.