Centering and removing white space from a SVG in an enclosing div - svg

Question

I am facing difficulty in stretching a SVG in the X-axis, so that there is no white space visible on either side. Also, I want the point (marked in red circle in the attached picture) to touch the starting of the second div with background color of black. I have tried changing the viewbox values, but I am not able to achieve the desired result.
The below is my code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.example {
width: 100%;
height: 100vh;
}
svg {
width: 100%;
height: 100%;
}
.section-two {
width: 100%;
height: 100vh;
background-color: black;
}
<div class="example">
<svg viewbox="0 0 3000 1750">
<path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>
</svg>
</div>
<div class="section-two">
</div>
enter image description here

Answer 1

For that to happen, you need to do two things:
Make sure that your viewBox is correct. It needs to match the dimensions of your <path>. It currently doesn't.
Add the following attribute to your SVG to turn off the automatic aspect-ratio-preserving scaling that SVG does.
preserveAspectRatio="none"
If we check the bounding box of your path, we get the values:
x: 2.600
y: 2.895
width: 2984.740
height: 1650.893
So that is what your viewBox needs to be set to, if you want the path to touch all four sides of the SVG's parent container.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.example {
width: 100%;
height: 100vh;
}
svg {
width: 100%;
height: 100%;
}
.section-two {
width: 100%;
height: 100vh;
background-color: black;
}
<div class="example">
<svg viewbox="2.6 2.9 2984.7 1650.9" preserveAspectRatio="none">
<path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>
</svg>
</div>
<div class="section-two">
</div>