How To Kern SVG text

I have some SVG text on a web page and I would like to kern a couple of the letters - how do I go about doing this? With HTML I would just wrap the letters in <span> tags and move them with the position property, but this doesn't work with SVG.

For instance, how would I move the letter 'o' in work in the code snippet provided?

Any help would be awesome.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 300vh;
  margin: 0;
  padding: 0;
  font-family: arial-black;
}


text {
  font-size: 2rem;
}

<svg class="git-svg" width="500" height="400" viewBox="0 0 500 400">
    <text x="15" y="26" fill="#000">How We Work</text>
</svg>

codepen: https://codepen.io/emilychews/pen/PgmoOE

Solution

SVG has a tspan tag that you're supposed to use for precise positioning of text within a text element:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan