Using SVG logo as mask

I'm basing my exercise on the accepted answer in: Creating transparent text to show gradient color of underlying div

Here's my rendition in jsfiddle: http://jsfiddle.net/skrln/zSjgL/

The svg code of my logo:

    <svg width="190" height="121">
        <mask id="cutouttext">
            <rect width="190" height="121" x="0" y="0" fill="white" />
                <path id="number-two" d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
    C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
    l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
                <polygon id="filler" points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6 
    141.4,46.6 141.4,33.9   " />
        </mask>
        <rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
    </svg>

The result so far:

Issue:

The mask isn't behaving the way I want to; I want the inner parts of the "B" and "E" to mask out the gray underlying div so you can see the background image like the image below:

I'm having trouble knowing what part of the logo is the and which one is the . Also I can't seem to figure out the logic behind the <mask> in the SVG.

There's nothing wrong with your SVG. You placed it on a grey background, so the bits that are masked out are grey.

What you want to do is remove the grey background from below the SVG image. There may be neater ways of doing this, but one approach is to use a table layout with the logo in one cell and the grey background in another.

Here's a JSFiddle link

HTML

<div class="gray">
    <svg width="190" height="121">
        <mask id="cutouttext">
            <rect width="190" height="121" x="0" y="0" fill="white" />
            <path d="M75.3,56.1c7.3-3,14.2-12.5,14.2-24c0-17.7-15.1-32.1-36.8-32.1H0v121.5h52.4c30,0,43.4-16.5,43.4-36.8
    C95.8,72.3,87,59.8,75.3,56.1z M66.5,94.6h-49V79.7h0.1l27-22.1c3.5-2.8,5.3-6.1,5.3-9c0-4-3.2-7.6-8.4-7.6c-6.4,0-9.1,5.7-10.2,9
    l-14.6-3.9c2.9-10.8,11.8-19.1,25.2-19.1c14.4,0,24.5,9.4,24.5,21.5c0,12.4-9,18.1-17.1,23.8l-10.4,7.3h27.6V94.6z" />
            <polygon points="190,33.9 190,0 101.6,0 101.6,121.5 190,121.5 190,87.6 141.4,87.6 141.4,74.7 177.1,74.7 177.1,46.6 
    141.4,46.6 141.4,33.9   " />
        </mask>
        <rect width="190" height="121" x="0" y="0" fill="white" mask="url(#cutouttext)" />
    </svg>
    <div></div>
</div>

CSS

.body {
    background: #550000 url('http://sciencelakes.com/data_images/out/7/8788677-red-background-wallpaper.jpg');
    display: block;
    height: 500px;
    margin: 0;
}
.gray {
    display:table-row;
    width:100%;
    height:121px;
}
.gray div, .gray svg {
    display:table-cell;
}
.gray div {
    background:gray;
    width:100%;
}