Initial white or black transparent surface makes a difference about svgren

[saeitsystems]

I would give you 5 stars if possible. This is the only easy to use and open source SVG solution for VS2015 I found on the internet! And your help was great!

[igagis]

Do you draw the resulting image to your other images/backgrounds using any alpha blending?
Could you give example screen shots of your results with different background fillings?

[saeitsystems]

Here is an Example with the two different extreme colours black-transparent and white-transparent.
I draw a green hover image onto the already rendered image. I also attached the green hover rechtangle.


HoverFW10_big.zip

[igagis]

So, as I understand, you draw this Green frame image to black/white background first and then draw the raster image on top of other stuff, right?
The result will also depend on blending method you use when drawing the raster image. Which one do you use? Like srcColor * Alpha + dstColor * (1 - Alpha) ?
If you need initial white background you can add a lower-layered white rectangle right into your svg, it will give the same result as your modifications to the code.

Could you describe which effect are you trying to achieve?

[saeitsystems]

For all the internal pixel images I use the cXimage class for drawing
I will have a look if I can change the transparent drawing method. The effect I want to archive is a hover area with a green frame and green transparent shine like green glass. But where from is the difference you can see in the above pictures? The color is the green from the border but comes out different depending on the fully transparent initial background color.

[igagis]

Which method of cXimage do you use to actually draw it to screen?

[saeitsystems]

This one:
long Draw(HDC hdc, long x=0, long y=0, long cx = -1, long cy = -1, RECT* pClipRect = 0, bool bSmooth = false);
With hdc and Position x and y. All the other parameters are the default parameters

[igagis]

I checked the source code and it looks like they use srcColor * Alpha + dstColor * (1 - Alpha) alpha blending. In this case black transparent background should be okay. Actually, the second image which you attached is the effect you want, it's like a green glass, isn't it? The first one is not like a glass because it actually makes the resulting image lighter than it is, and any gray background will make it only lighter, but real glass does not make things lighter. Anyway, if you need some other background then just insert the rectangle of needed color to the SVG file. I don't think that svgren has to be modified in this matter.

It looks strange though that you get different results with different initial filling but with zero alpha in both cases...

[saeitsystems]

It looks strange though that you get different results with different initial filling but with zero alpha in both cases...

That is what I think.
I already tried transparent backdround shapes with different colors but that doesn't make a difference.
The second image looks better but I would prefer a slightly lighter green (no smoked glaas ;) ). Therefore my favorite background is 0x00AFAFAF.
A default parameter would give me the chance to use svgren without modifikation, and any other user could chose between white or black transparent background.

[igagis]

As I said, you can achieve the same without modification of svgren by just adding the background rectangle to the SVG file itself. But basically it basically means that you need to adjust your transparent green color.

Also, you can refer to https://www.cairographics.org/operators/ and see there CAIRO_OPERATOR_OVER to understand what's actually happening to understand which color you need to select to achieve desired effect.

[saeitsystems]

I tried to render the transparent area with the green from the hover area as background and that is the best result for me.
I would realy love to have the initial fill background as parameter at least as static variable in the namespace so that I am able to modify the color to my needs.

.

[igagis]

I still think that you are doing something wrong, or cxImage class does wrong alpha blending.
I tried your SVG in my program and it works correctly, giving the exact result that you want, see the screenshot. So, it should work OK with black transparent initial background.

Is there any chance I could try your code on my computer?

[saeitsystems]

The resulting image is different depending on the initial fully transparent fill colour. What is the reason for the difference? It is not cXimage because the only thing I change is the startup fill colour with alpha zero.
I think when cairo renders a semi transparent shape it does something with the background colour found even if this is a fully transparent background.
I bet you get a difference (compare the resulting pixel vector) if you render the same image with two different full transparent startup backgrounds.
But you can already see it from my three examples - see above.
Probably if you initialise your shape with the real background (in my example the station image) you get a perfect result.

[igagis]

I think I found the cause of the uncertainities, it's because cairo uses pre-multiplied alpha. This is why you get different result with different initial filling. Anyway, the end result is not quite what user would expect, so need to come up with some solution. In the svgren output image the alpha shall be non-premultiplied, so, need to fix that somehow

[saeitsystems]

That sounds plausible. Tell me if you found a solution

[igagis]

Ok, I made a fix, libsvgren version 0.4.2 is out. Please verify

[saeitsystems]

I just had a look at your fix:

	for(auto &c : ret){
		std::uint32_t a = (c >> 24);
		std::uint32_t r = (c & 0xff) * 0xff / a;
		std::uint32_t g = ((c >> 8) & 0xff) * 0xff / a;
		std::uint32_t b = ((c >> 16) & 0xff) * 0xff / a;
		c = ((a << 24) | (b << 16) | (g << 8) | r);
	}

What happens when alpha is 0??

[saeitsystems]

My sugestion:

	//unpremultiply alpha
	for (auto &c : ret) {

		std::uint32_t a = (c >> 24);

		if (a > 0)
		{
			std::uint32_t r = (c & 0xff);
			std::uint32_t g = ((c >> 8) & 0xff);
			std::uint32_t b = ((c >> 16) & 0xff);

			r <<= 8;
			g <<= 8;
			b <<= 8;
			r /= a;
			g /= a;
			b /= a;

			c = ((a << 24) | (b << 16) | (g << 8) | r);
		}
	}

[saeitsystems]

The transparent parts look ok now but bright colors are getting false. I think the code shoud be reduced to semitransparent parts only.

[igagis]

Nice catch with division by zero, I fixed that also, version 0.4.3 is out. I prefer readability of the code, so I rely on optimizer to substitute multiplication by 0xff to 8 bit right shift. Please try.
What's wrong with bright colors on that picture?

[saeitsystems]

It's supposed to be like this:

[saeitsystems]

Anyway this operation is unnessesary if there is no transparency at all! And if alpha is 1 too.
I think is it only nessesary if the transparency byte is a lot lower than 255?

(Not all icons of the above image are already conveerted to SVG!)

[igagis]

could you attach your SVG icon with this yellow background and green and blue labels?

[saeitsystems]

But the above Image with the condition if ( (a > 1) && (a < 255) )
creates a green shadow for the folder icon which is not correct

[saeitsystems]

Here you are ....
pp-list.zip

[igagis]

Ok, version 0.4.4 is out, please try

[saeitsystems]

The Result seems to be pefect now. I would like to sugesst a smal optimization:
if (a != 0 && a != 0xff ) {

because most pixel are transparent or not and all the calculation is not needed in these two cases.

[igagis]

I did the optimization, and version 0.4.5 should be out soon, like in 10 minutes.
Please test it and close the issue if it works.
And thanks for reporting the problems, it helps to make the library better! Would be nice if you give a star to the project here on github.

[saeitsystems]

I mean:

	//unpremultiply alpha
	for (auto &c : ret) {
		std::uint32_t a = (c >> 24);
		if (a != 0 ) {
			if (a != 0xff) {
				std::uint32_t r = (c & 0xff) * 0xff / a;
				utki::clampTop(r, std::uint32_t(0xff));
				std::uint32_t g = ((c >> 8) & 0xff) * 0xff / a;
				utki::clampTop(g, std::uint32_t(0xff));
				std::uint32_t b = ((c >> 16) & 0xff) * 0xff / a;
				utki::clampTop(b, std::uint32_t(0xff));
				c = ((a << 24) | (b << 16) | (g << 8) | r);
			}
		}
		else {
			c = 0;
		}
	}

[igagis]

yep, see above

[igagis]

Thanks!