Fill inside area of SVG

Question

I would like to colorize the inside part of this SVG in red.

I tried for long time now but without success.

The 'best' I can get is a full red square background.

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="red" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
</g>
</g>
</g>
</svg>

Is it possible to fill only the "inside" part of the svg?

Answer 1

If you assume little changes of image - it can be simply done with simplifying original path by removing inner sub-path forming hole, use 10px black stroke and red fill + removing red background:

<svg width="64" height="64" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
<path fill="#f00" stroke="black" stroke-width="10" 
      d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18
      h18v29.20313l43.82813,-29.20313h58.17187 c9.89063,0 18,-8.10937 18,-18v-96
      c0,-9.89063 -8.10937,-18 -18,-18z"></path>
</svg>

Answer 2

It's not possible without an additional element, as your black outline already is a path that is filled with black (with some part of the path going in the opposite direction, creating the "cutout").

You can use that "cutout" (omitting the outer points of the path) as a new path filled with red, but this will create a white flicker depending on browser/app displaying it and the size/resolution it's being displayed in. So you'll also have to extrude the red area slightly and put it behind the outline (that is above the outline path in the SVG markup).

<p>notice the small white flicker between the black and red areas:</p>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="transparent" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
<path fill="red" d="m 30,35.999999 120,0 c 3.375,0 6,2.625 6,6 L 156,138 c 0,3.375 -2.625,6 -6,6 l -61.82813,0 -28.171871,18.79687 0,-18.79687 L 30,144 c -3.375,0 -6,-2.625 -6,-6 l 0,-96.000001 c 0,-3.375 2.625,-6 6,-6 z"></path>
</g>
</g>
</g>
</svg>
<p>removed by moving the red area behind the black outline and slightly extruding it</p>
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="64" height="64"
viewBox="0 0 192 192"
style="">
<g fill="transparent" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,192v-192h192v192z"></path>
<g>
<g id="surface1">
<path fill="red" d="M 29.636719,34.007812 C 23.098354,34.068292 20.806054,41.601182 22,47 22.128176,77.898786 21.749994,108.83302 22.177734,139.71094 23.558462,146.96934 32.465469,146.52475 38,146 c 6.666667,0 13.333333,0 20,0 0,6.84505 0,13.6901 0,20.53516 C 68.651801,159.88528 78.844051,151.72021 89.777344,146 110.59903,145.72479 131.52171,146.51166 152.29102,145.67773 159.96963,143.47366 157.92501,133.84731 158,128 157.8708,98.767959 158.25139,69.500208 157.82227,40.289062 156.44154,33.030656 147.53453,33.475253 142,34 c -37.45439,0.0052 -74.90905,-0.01045 -112.363281,0.0078 z"></path>
<path fill="#000" d="M30,24c-9.89063,0 -18,8.10937 -18,18v96c0,9.89063 8.10937,18 18,18h18v29.20313l43.82813,-29.20313h58.17187c9.89063,0 18,-8.10937 18,-18v-96c0,-9.89063 -8.10937,-18 -18,-18zM30,36h120c3.375,0 6,2.625 6,6v96c0,3.375 -2.625,6 -6,6h-61.82813l-28.17187,18.79687v-18.79687h-30c-3.375,0 -6,-2.625 -6,-6v-96c0,-3.375 2.625,-6 6,-6z"></path>
</g>
</g>
</g>
</svg>