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.

[![preview svg](https://i.stack.imgur.com/8s9i6.jpg)](https://i.stack.imgur.com/8s9i6.jpg)

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>

```