How to make SVG width responsive but keep SVG height unchanged?

Question

Currently my SVG component is responsive. However, I want to keep the height of SVG fixed as 352px, but only reduce width while I resize the window, so that users could see my SVG pictures, otherwise, the SVG pictures would be really small to see when users resize the window.

Anyone knows how to fix height while reducing the width when resizing the windows for SVG component?

Code is below.

/* Carousel CSS */
.svg-container {
    width:100vw;
}

<div class="carousel-item active svg-container">
        <svg id="svg1" version="1.1" viewBox = "0 1 1365 352" preserveAspectRatio="xMidYMid meet">
            <line x1="0" y1="352px" x2="100%" y2="352px" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1"/>
            <g class="kitchen" transform="translate(400,0)">
                <g class="kitchen-cabinet" stroke-width="1.5">
                    <rect x="50" y="0" rx="3" ry="3" width="175" height="110" fill="none" stroke="rgba(76, 61, 104, 0.2)" filter="url(#f1)"/>
                    <line x1="137.5" y1="0" x2="137.5" y2="110" stroke="rgba(76, 61, 104, 0.15)" />
                    <defs>
                        <filter id="f1" x="0" y="0" width="110%" height="110%">
                        <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
                        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
                        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
                        </filter>
                    </defs>
                </g>
                <g class="kitchen-table" stroke-width="1">
                    <polygon points="-5.5,200 295.5,200 290,205 0,205" stroke="rgba(76, 61, 104, 0.1)" fill="rgba(153, 102, 51, 0.5)"/>
                    <line x1="0" y1="265" x2="290" y2="265" stroke="rgba(76, 61, 104, 0.2)" />
                    <line x1="0" y1="205" x2="0" y2="100%" stroke="rgba(76, 61, 104, 0.3)" />
                    <line x1="290" y1="205" x2="290" y2="100%" stroke="rgba(76, 61, 104, 0.3)" />
                    <path id="kitchen-kettle" fill="rgba(76, 61, 104, 0.2)" d="M1136.74,509.923h-102.07c-3.036,0-6.035,0.782-8.664,2.257c-2.623,1.445-4.867,3.578-6.492,6.17L859.262,776.122
                    l-17.655-84.057c43.938-30.096,80.571-70.813,105.963-117.813c26.483-49.065,40.481-104.696,40.481-160.881
                    c0-65.256-18.516-128.539-53.546-183.009c-33.875-52.69-81.448-94.673-137.766-121.563c0.166-0.961,0.33-1.922,0.496-2.925
                    l0.466-2.79c1.075-6.449-0.691-13.101-4.972-18.726c-5.715-7.51-15.132-12.463-25.844-13.589
                    c-164.428-16.22-331.17-16.219-495.605,0.001c-10.705,1.125-20.123,6.077-25.838,13.588c-4.281,5.625-6.047,12.277-4.973,18.72
                    l0.433,2.644c0.17,1.031,0.329,2.022,0.486,3.012c-56.283,26.834-103.939,68.866-137.846,121.628
                    C68.515,284.833,50,348.116,50,413.371c0,56.184,13.998,111.815,40.481,160.882c25.508,47.21,62.334,88.063,106.586,118.256
                    l-74.045,352.551c-4.963,23.682,0.936,48.023,16.185,66.778c15.243,18.784,37.852,29.558,62.028,29.558h318.161h318.136
                    c24.167,0,46.784-10.772,62.055-29.558c15.231-18.766,21.121-43.107,16.16-66.778l-10.759-51.224
                    c63.816-0.731,108.188-47.532,135.596-143.067c13.684-47.695,21.321-99.839,28.06-145.845c4.112-28.069,7.995-54.58,12.613-74.716
                    c5.236-22.9,14.16-43.264,26.523-60.525c9.985-13.937,22.219-25.89,36.367-35.53c4.91-3.372,6.974-9.207,5.257-14.869
                    C1147.651,513.597,1142.68,509.923,1136.74,509.923z M188.251,1014.052c2.931-30.803,9.347-72.623,19.068-124.301
                    c16.52-87.817,37.172-174.998,37.38-175.867c0.788-3.323,4.12-5.38,7.447-4.589c3.324,0.789,5.379,4.124,4.589,7.447
                    c-0.201,0.846-20.287,85.638-36.64,172.028c-30.866,163.06-20.094,180.986-17.621,182.922
                    c24.801,11.26,234.416,13.742,313.081,13.742c3.417,0,6.186,2.769,6.186,6.186s-2.769,6.186-6.186,6.186
                    c-29.222,0-286.421-0.419-318.328-14.923C189.498,1079.371,183.061,1068.601,188.251,1014.052z M287.636,103.286
                    c2.78-0.396,280.087-39.395,465.474,0.072c3.342,0.712,5.474,3.997,4.763,7.339c-0.62,2.907-3.187,4.899-6.045,4.899
                    c-0.427,0-0.86-0.045-1.294-0.137c-183.222-39.007-458.383-0.324-461.141,0.072c-3.406,0.477-6.517-1.864-7.002-5.245
                    C281.907,106.905,284.254,103.77,287.636,103.286z M320.96,611.223c-2.992,0-5.487-2.124-6.062-4.946
                    c-0.081-0.401-0.124-0.815-0.124-1.24c0-0.423,0.043-0.836,0.124-1.235c0.572-2.825,3.068-4.951,6.062-4.951h364.451
                    c2.994,0,5.489,2.126,6.062,4.951c0.081,0.399,0.124,0.812,0.124,1.235c0,0.425-0.043,0.839-0.125,1.24
                    c-0.575,2.823-3.069,4.946-6.061,4.946H320.96z M633.6,1091.621c0,3.417-2.769,6.186-6.186,6.186h-49.281
                    c-3.417,0-6.186-2.769-6.186-6.186s2.769-6.186,6.186-6.186h49.281C630.83,1085.435,633.6,1088.204,633.6,1091.621z
                    M207.183,644.343c-33.961-26.496-62.124-60.789-81.499-99.319c-20.601-41.022-31.046-85.317-31.046-131.653
                    c0-54.592,15.022-107.793,43.441-153.854c27.179-44.094,65.552-80.124,111.045-104.339c0.001,0.008,0.003,0.016,0.004,0.024
                    l0.203,1.23c2.561,15.401,19.575,26.361,37.913,24.436c153.839-15.123,309.847-15.122,463.68-0.001
                    c1.411,0.149,2.813,0.221,4.201,0.221c16.683,0,31.353-10.435,33.695-24.646c0.071-0.406,0.131-0.803,0.196-1.206
                    c45.458,24.206,83.808,60.22,110.959,104.281c28.418,46.102,43.44,99.303,43.44,153.854c0,46.304-10.453,90.598-31.07,131.653
                    c-19.208,38.248-47.111,72.333-80.861,98.832l-4.962-23.628c-0.964-4.624-3.526-8.813-7.207-11.791
                    c-3.661-2.989-8.288-4.635-13.032-4.635h-53.733l-18.997-34.229c-1.775-3.191-4.396-5.876-7.58-7.765
                    c-3.19-1.875-6.82-2.867-10.499-2.867h-79.171l-14.413-24.214c-1.843-3.092-4.456-5.65-7.545-7.392
                    c-3.076-1.776-6.61-2.715-10.219-2.715h-52.967c-0.332-3.841-1.181-17.497,2.01-31.041c4.94-20.976,16.781-31.61,35.194-31.61
                    c9.092,0,17.169-1.908,24.005-5.671c5.699-3.138,10.571-7.621,14.48-13.328c4.341-6.365,4.707-14.256,0.979-21.111
                    c-3.731-6.832-10.574-10.913-18.308-10.913h-90.118h-90.144c-7.734,0-14.577,4.08-18.309,10.915
                    c-3.715,6.834-3.35,14.723,0.982,21.111c3.909,5.704,8.78,10.188,14.479,13.325c6.835,3.764,14.911,5.671,24.005,5.671
                    c18.445,0,30.285,10.635,35.194,31.61c3.187,13.53,2.339,27.198,2.009,31.041h-52.965c-3.609,0-7.143,0.939-10.208,2.709
                    c-3.1,1.748-5.714,4.306-7.556,7.397l-14.414,24.215h-77.612c-3.689,0-7.312,0.992-10.475,2.867
                    c-3.195,1.88-5.824,4.565-7.604,7.766l-18.997,34.227h-55.292c-4.743,0-9.371,1.646-13.027,4.631
                    c-3.685,2.981-6.248,7.17-7.213,11.793L207.183,644.343z" transform="scale(0.053) translate(350,2620)"/>
                    <g class="coffee-cup">
                        <g transform="translate(120,20)" style="fill:none;stroke:rgba(76, 61, 104, 0.3); stroke-width:2/5px;stroke-linecap:round;">
                            <path id="s1" d="M115,130 q6,6,1,9 t0,8" />
                            <path id="s2" d="M115,130 q6,6,1,9 t0,8" transform="translate(8,0)" />
                            <path id="s3" d="M115,130 q6,6,1,9 t0,8" transform="translate(16,0)" />
                        </g> 
                        <g transform="translate(223,165)" style="fill:rgba(76, 61, 104, 0.2);">
                        <path d="m 4.435,6.66 c 0.24,5.48 3.3455,19.43 6.9145,22.915 l 9.12,0 9.125,0 c 1.46,-1.455 2.075,-5.83 3.575,-9.6 0.61,-1.525 2.405,-8.38 2.73,-8.265 7.325,-1.41 4.72,10.095 -3.19,9.52
                                    -0.975,1.895 -1.705,3.845 -1.76,3.805 14.515,-4.01 14.125,-14.385 5.7985,-15.67 -0.44,-0.674 0.405,-2.08 0.175,-2.795 l -16.455,-0.45 z M -0.9995,29.895 c 1.1085,2.5585 5.11,4.03 7.325,4.49 l 14.705,0 14.7015,0 c 2.215,-0.4595 6.105,-1.81 7.2145,-4.37 l -20.62,0.235 z" />
                        </g>
                    </g>
                </g>
            </g>
            <g class="flowerpot" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1" >
                <path fill="none" opacity="1"
                    d="M103,171 C 102,207 105,226 118,238 L183,238 C 195,228 200,205 198,170.5" transform="translate(750,113)"/>
                <line x1="852.5" y1="283.5" x2="948.3" y2="283.5" />
            </g>
            <g class="plant" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1" >
                <line x1="900" y1="150" x2="900" y2="283.5" />
                <path fill="none" opacity="1" transform="translate(750,20)"
                      d="M149,244 C 135,240 120,246 100,217 C 126,218 137,228 150,244 C 164,224 172,219 191,218 C 183,239 169,241 150,244" />
                <path fill="none" opacity="1" transform="translate(750,15)"
                      d="M150,209 C 127,209 108,202 90,176 C 126,179 135,191 150,208 C 157,189 176,177 197,176 C 181,208 165,208 149,209" />
                <path fill="none" opacity="1" transform="translate(728,-10) scale(1.15)"
                      d="M150,168 C 133,166 122,159 114,148 C 130,149 141,153 150,167 C 155,151 166,148 178,145 C 170,163 159,167 150,168" />
            </g>
        </svg>
      </div>

Answer 1

It depends on what you want the behaviour to be. You haven't quite made that clear.

Take a look at the <svg ... preserveAspectRatio="xMidYMid meet"> attribute.

If you want the SVG to stretch horizontally to fill the width, then change it to:

preserveAspectRatio="none"

Or if you want the SVG to expand (enlarge) to fill the width (meaning that parts of the image may get lost off the top and bottom) you can use:

preserveAspectRatio="xMidYMid slice"

For more information on the preserveAspectRatio attribute, see this section in the SVG specification.