I felt I should post an answer to explain what is going on with OPs example.

Simply settings a fill: white on an SVG does not fully reproduce the desired result. OP's example also requires a parent div with mix-blend-mode: difference set as well.

You can actually reproduce this without any SVGs at all. You simply need an element with a color/fill of white, and a parent element with mix-blend-mode: difference. This has to do with how the blending mode of difference works with the color white over a background.

function _Swap() {
  document.querySelector(".backgroundDiv").style.background = (document.querySelector(".backgroundDiv").style.background == "rgb(0, 0, 0)") ? "rgb(255, 255, 255)" : "rgb(0, 0, 0)";
}

.backgroundDiv {
  background: #FFF;
  padding: 4em;
}

.test {
  mix-blend-mode: difference;
}

p {
  color: #FFF;
}

<div class="backgroundDiv">
  <div class="test">
    <p>This is a test</p>
  </div>
</div>
<input type="button" value="Swap Background Color" onclick="_Swap()">

It is not changing. the path element in svg has this css attribute:

fill: white;

It is causing what you see. you can open it in devTools and remove that attribute and you can see the change then. to achieve what you want make a svg and add fill: white; to the path element.

Update:

I just found out this css property which was given to nav tag:

mix-blend-mode: difference;

It will revert the entire color of the element in the tag based on the bg.

essxtee answer was before my update. So the credit is his :)