2

How do I retain the opacity of an image when creating an image mask using two images in SVG? As seen in the picture below, the image is nearly transparent - it should be completely opaque. Why is this happening, and how can I force the masked product to have 100% opacity?

Here is the result I am getting:

enter image description here

Here is the mask image I am using: enter image description here

Here is my code (sorry about the PHP variables):

<svg width="'.$width.'" height="'.$height.'" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>                          
            <mask id="mask'.$id.'" maskUnits="userSpaceOnUse"
                x="0" y="0" width="'.$width.'" height="'.$height.'">

                <image id="maskImg'.$id.'" x="0" y="0" width="'.$width.'px" height="'.$height.'px"
                    xlink:href="images/'.$treatment_url.'" >
                </image>        
            </mask>

            <g id="imgGroup'.$id.'">
                <rect x="0" y="0" width="'.$width.'" height="'.$height.'" fill="rgba(30,30,30,0.2)"  />
                <image id="listingImg'.$id.'" 
                    x="0" y="0" width="'.$width.'px" height="'.$height.'px"
                    xlink:href="'. $img_url .'">
                </image>
            </g>                    
        </defs> 

    <use xlink:href="#imgGroup'.$id.'" mask="url(#mask'.$id.')" opacity="1" />';    
</svg>

FYI: the <rect> in the <g> group is just to provide a background when the MASKED image is smaller in the x or y dimension than the MASKING image; it does not affect the masking problem I'm having, as I've tried it both ways.

I'm stumped, and appreciate any help!

Danny Bullis
  • 3,043
  • 2
  • 29
  • 35
  • On further research, I read this about the way opacity / alpha values are computed during SVG masking...but I'm not sure if this means there will be ONE alpha value applied to the entire mask (premultiplied?) http://www.w3.org/TR/SVG/masking.html#SimpleAlphaBlending – Danny Bullis Jun 13 '12 at 17:04
  • "However, if this pixel uses premultiplied alpha, all of the RGB values (0, 1, 0) are multiplied by 0.5 and then the alpha is appended to the end to yield (0, 0.5, 0, 0.5). In this case, the 0.5 value for the G channel actually indicates 100% green intensity (with 50% opacity). For this reason, knowing whether a file uses premultiplied or straight alpha is essential to correctly process or composite it." -> http://en.wikipedia.org/wiki/Alpha_compositing (shit). – Danny Bullis Jun 13 '12 at 17:22

1 Answers1

4

SVG 1.1 uses luminance masks. A simple and somewhat inaccurate explanation is: White in the mask image gives fully opaque, black gives fully transparent. Some more explanations here. Some more advanced examples of masks with images, see here.

Alpha masks have been proposed and accepted as a requirement for SVG2.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • Excellent point! I edited the original post to show the mask I was using (which is a dark blue)...This could very well be the problem, I am trying it out now with a white mask to see if that works (and vice versa with black) - will post when I see if either method works. Thanks! – Danny Bullis Jun 14 '12 at 17:14
  • Ok, yeah changing the mask from blue to white works! Thanks a lot for the help – Danny Bullis Jun 14 '12 at 17:34