Create full width nav using svg - html

Question

I'm trying to create this nav using an SVG. I was provided with an SVG however it didn't work out so someone on SO helped me make another. However now I am unsure how to create the nav using
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xl="http://www.w3.org/1999/xlink" version="1.1"
width="576" height="152" viewbox="0 0 576 152">
<path transform="translate(10,-185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10" fill="transparent" />
</svg>
My current nav looks like
<nav>
<ul>
<li class="completed">Exam <i class="fa fa-check-circle"></i></li>
<li>Personal <i class="fa fa-times-circle"></i></li>
<li>Employment</li>
<li>Appointment</li>
<li>Record Check</li>
<li>Submit</li>
</ul>
</nav>
With just a white background. So it looks close to what the image looks like just minus the SVG shape.

Answer 1

First, your SVG needed a little changes to correctly scale itself (with preserveAspectRatio="none") and some more adjusts to your specific layout:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" width="576" height="152" viewbox="0 0 576 152" preserveAspectRatio="none">
<path transform="translate(10, -185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-opacity="0.1" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" fill="white" />
</svg>
And here's the CSS using it:
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
nav li {
background: url('path/to/your.svg') no-repeat;
background-size: 100% 100%;
flex: 1 1 auto;
margin: 0 -5px;
}
nav a {
display: block;
font: bold 1rem Sans-serif;
color: rgba(0, 0, 0, .25);
padding: 1em 2em;
text-align: center;
text-decoration: none;
}
nav li.completed a {
color: rgba(0, 0, 0, .5);
}
If you like, here's a working sample.