HTML CSS - Curved div layout and SVGs overlapping issue - html

Question

I've been given a design to develop and the design uses numerous circular layout items and I'm a little unsure how to go about this, I've tried using SVGs, PNGs etc but it's not playing ball.
For example, this section of the design looks like this
But when I try using an SVG, I end up with this
That ^ show a section with a grey background and above is an SVG which has a grey bottom and green line through it, I've tried using an SVG which is white on the top, grey on the bottom and has that green line through the middle, but when I try to replicate the design I run into the problem that SVG doesn't have the image so it cuts off as you can see. Here is an example of my code:
HTML:
<img src="img/line-05.svg" class="svg" />
<section class="bgYellowGrey">
<div class="column two">
<div class="numWrapper"><p class="number">2</p></div>
<h2>Title</h2>
<h3>Subtitle</h3>
<p>Paragraph text</p>
</div>
<div class="column two">
<img id="image-03" src="img/third-image.png" />
</div>
</section>
CSS (of which is relevant):
section{
position: relative;
float: left;
}
.column{
float: left;
}
.two{
padding: 10px 2%;
width: 46%;
}
#image-03{
margin-top: -150px;
}
.svg{
position: relative;
width: 100%;
z-index: 99999;
}
The SVG in question is this (screenshot from illustrator):
The design is totally based around this layout unfortunately. Is there any other convention or simple method of doing replicating the design? I guess I just need to find a way to clip into a div/svg? Any help would be appreciated.
This may be hard to explain but do tell me to explain further on bits and I shall.