Why does converting my greyscale SVG to alpha cause a reduction in brightness?

Viewed 15

I'm trying to create a transparent "starry night" effect with an SVG. I have my SVG inlined on a webpage, inside an element with a black background. I start out with a turbulence filter, then apply a color matrix to get the desired effect:

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

... which gives:

pic1

But this has no alpha transparency; I want this to represent a plane of white pixels whose brightness is reduced only by being on a black background and having less opacity. So I put it through a second filter to do this:

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
        <feColorMatrix values="
            0 0 0 0 1
            0 0 0 0 1
            0 0 0 0 1
            1 1 1 0 0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

... which gives:

img2

This is very similar, but slightly darker. Why is it slightly darker? Shouldn't it logically produce identical pixel colours when overlayed on a black background?

0 Answers
Related