Fix SVG height but allow horizontal scaling - css

Question

I have an SVG image where I need keep a consistent height but allow it to grow horizontally with the view window. I've looked into the preserveAspectRatio attribute but cannot get it to do anything. I have a feeling there are other issues with my SVG attributes that are preventing this, but I'm very new to SVG and have yet to figure out what is causing the issue and/or conflict. I've also tried multiple different settings with the CSS with no success.
https://jsfiddle.net/cdsLb0wd/2/
.scoop__wrapper {
background-color: black;
overflow: hidden;
top: 674px;
//height: 382px;
//width: 100%;
}
.combined-shape__scoop {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
z-index: 2;
}
<div class="scoop__wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="392" viewBox="0 0 1440 392">
<defs>
<path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
<filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
<feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
<use fill="#FFF" xlink:href="#b"/>
</g>
</svg>

Answer 1

It's not clear exactly what effect you are after, but perhaps
preserveAspectRatio="none"
gives the effect you want?
.scoop__wrapper {
background-color: black;
}
<div class="scoop__wrapper">
<svg width="100%" height="392" viewBox="0 0 1440 392" preserveAspectRatio="none">
<defs>
<path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
<filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
<feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
<use fill="#FFF" xlink:href="#b"/>
</g>
</svg>
</div>
Demo: https://jsfiddle.net/cdsLb0wd/3/
Or perhaps you wanted the aspect ratio of the SVG to stay the same, and the SVG occupies the whole width. Then we should just view a portion of it based on the width. In which case, you should use:
preserveAspectRatio="xMidYMin slice"
.scoop__wrapper {
background-color: black;
}
<div class="scoop__wrapper">
<svg width="100%" height="392" viewBox="0 0 1440 392" preserveAspectRatio="xMidYMin slice">
<defs>
<path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z"/>
<filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterUnits="objectBoundingBox">
<feOffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16"/>
<feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-1 9)">
<use fill="#000" filter="url(#a)" xlink:href="#b"/>
<use fill="#FFF" xlink:href="#b"/>
</g>
</svg>
</div>
Demo: https://jsfiddle.net/cdsLb0wd/4/