JSFiddle - React, Tailwind, and code Playground

HTML

<div class="element" style="width: 30%">
  <svg class="scale" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>
<div class="element" style="width: 60%">
  <svg class="scaled" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <text x="50" y="50" text-anchor="middle">Test</text>
  </svg>
</div>

CSS

.element {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.scaled {
  width: 100%;
}