Inkscape: alternative to setting a mask to a group of objects in order to achieve slight transparency of said objects

Question

I cannot seem to properly apply a simple mask to a group of two ellipses (in order to make it slightly transparent) with Inkscape 0.92.4. The resulting image becomes completely transparent instead of slightly transparent.

What I did:

1. created a new document.
2. set Document properties; units to px, width x height to 16x16 px.
3. zoomed in to view entire page.
4. created first ellipse and set its fill to black.
5. created second ellipse inside first and set its fill to white.
6. grouped the two ellipses.
7. created a rectangle covering the two ellipses and set its fill to a shade of gray.
8. selected all (group and rectangle shown as selection).
9. used "Object > Mask > Set".

At this point Inkscape shows (and exports) the image as desired, but other renderers do not. Firefox, Chrome and Gimp's SVG import display no visible image when opening the saved SVG file, which might be due to a bug in Inkscape. If it is, I'd like to work around it.

Can I achieve the desired effect in another way using Inkscape?

The resulting XML from steps above (drawing.svg), just in case:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="16"
   height="16"
   viewBox="0 0 4.2333332 4.2333335"
   version="1.1"
   id="svg3281"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs3275">
    <mask
       maskUnits="userSpaceOnUse"
       id="mask3841">
      <rect
         style="opacity:1;fill:#9b9b9b;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         id="rect3843"
         width="3.0297153"
         height="3.0592449"
         x="0.60239953"
         y="293.3974" />
    </mask>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="44.8"
     inkscape:cx="8.4637047"
     inkscape:cy="8.0165929"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1337"
     inkscape:window-height="924"
     inkscape:window-x="2208"
     inkscape:window-y="288"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata3278">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="eye"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-292.76665)">
    <g
       id="g3837"
       mask="url(#mask3841)">
      <ellipse
         ry="1.2431873"
         rx="1.2668108"
         cy="294.87091"
         cx="2.1704102"
         id="path3829"
         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
      <ellipse
         ry="0.64374065"
         rx="0.65850544"
         cy="295.25183"
         cx="2.3712099"
         id="path3831"
         style="opacity:1;fill:#f3f3f3;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    </g>
  </g>
</svg>

Answer 1

Sometimes Inkscape has SVG functionality which isn't supported in browsers yet. This isn't a bug in Inkscape, it's lack of support for certain SVG features in browsers: Typically these missing features include things such as filters and effects, and gradient meshes.

I'd suggest you try a different approach to keep it as simple as possible, such as reducing the opacity of the group instead. In the example below I released and deleted the mask you applied, then reduced the fill opacity of the group.

I tested this approach in Firefox and Chrome. Both work fine.