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>