Pourquoi le SVG en niveaux de gris devient-il moins lumineux lorsqu'il est converti en alpha ?

Question

J'essaie de créer un effet transparent "nuit étoilée" en utilisant SVG. J'ai placé le SVG en ligne dans un élément de fond noir sur la page Web. J'ai commencé avec un filtre de turbulence puis j'ai appliqué une matrice de couleurs pour obtenir l'effet souhaité :

<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>

...étant donné :

Mais cela n'a pas de transparence alpha ; je veux qu'il représente un plan de pixels blancs dont la luminosité n'est réduite qu'en étant sur un fond noir et en ayant moins d'opacité. Je l'ai donc passé dans un deuxième filtre pour faire ceci :

<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>

...étant donné :

C'est très similaire mais légèrement plus sombre. Pourquoi est-il légèrement plus sombre ? Lorsqu'il est superposé sur un fond noir, cela ne devrait-il pas logiquement produire la même couleur de pixel ?

Answer 1

Comme Robert l'a souligné ci-dessus, la conversion de l'espace colorimétrique peut produire un comportement étrange. Après la deuxième matrice de couleurs, les pixels devraient en réalité être plus clairs. Il semble que vous puissiez résoudre ce problème en ajoutant un feComponentTransfer supplémentaire avec SQRT(1/2.2) comme valeur d'exposant.