SVG height not behaving as expected - css

Question

Not that it matters but I'm using https://getwaves.io/ to generate an SVG image.
What should happen
The blue waves should take up much more vertical space in the gray box. It seems like it does not use object-fit: cover.
In fact, it should follow the size of the box, like a bounding box.
What I've tried to far
Set height and width to 100%
Set object-fit to cover
Made sure there is a viewbox
Made sure there are no other width and height
Example
It shows that an JPG image works fine but not the SVG image.
Question
How can I fix it?
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
object-fit: cover;
height: 100%;
width: 100%;
}
Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>

Answer 1

First of all you can use the attribute preserveAspectRatio="none" on <svg>. This will stretch the SVG if you specify a height and a width.
Second you path was placed around 200 down the y axis. So, when it stretched, the transparent area above the path would also take up more space. I moved the path so that it almost hits y=0 on the top. Now the path only takes up 113 in the height and when stretched it will fill up the entire box.
I used SvgPathEditor to edit the path.
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
height: 100%;
width: 100%;
}
Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>