Responsive width SVG image with fixed height rectangle at left and bottom - see my pen

[lunaticalm]

I need a SVG image something like the image bellow (open door architectural symbol ) that will be resized proportional but the height in green and width in red will stay same.The colors and sizes are just for illustrative purpose.

I made try with this code bellow but don't know how to make the height in green and width in red to be fixed when image is resized.


If you can help thank you very much on your time!

<svg id="imgsvg" width="400px" height="400px" version="1.0" state='normal'
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">


    <defs>

        <!-- The left head -->
        <svg class="head input-source" id="left"
            height="100%"
            width="100%"
            viewBox="0 0 10 200"
            preserveAspectRatio="xMinYMax"
            >
            <rect
            width="100%"
            height="100%"
            stroke='black'
            stroke-width='0'
            fill="#000"
            />
        </svg>


     <!-- The bottom head -->
    <svg class="head input-source" id="bottom"
           height="100%"
            width='100%'
        viewBox="0 0 200 20"
        preserveAspectRatio="xMinYMax"
        >
        <rect 
            width="100%"
            height="100%"
            stroke='gray'
            stroke-width='0'
            fill="gray"
        />
    </svg>

    </defs> 


 <!-- The Quad -->
       <svg class='head input-source' id="quad"
            height="100%"
            width='100%'
            viewBox="0 0 200 200"
            preserveAspectRatio="xMinYmax"
            >
  <path
     d="M0,1 Q199,0 199,199"
     fill="#ffffff"
     fill-opacity="0"
     stroke="#000000"
     stroke-width="2"
     />
</svg>
        <use xlink:href='#left'/>
        <use xlink:href='#bottom'/>

    
</svg>

Code Pen