https://jsfiddle.net/pm08fb2z/embedded/html,css,result/

<div class="a">  
    <svg width="100%" height="100%" viewBox="0 0 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
    </svg>
</div>

<div class="b">  
    <svg width="100%" height="100%" viewBox="0 0 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
    </svg>
</div>

<div class="c">  
    <svg width="100%" height="100%" viewBox="0 0 1000 300"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="50%" y ="50%" dominant-baseline="central" text-anchor="middle" font-size="300" fill="black">Text</text>
    </svg>
</div>

svg {
  border:1px solid red;
}
.a { width: 100px; }
.b { width: 300px; }
.c { width: 800px; }

https://wattenberger.com/guide/scaling-svg

243200cookie-checkFont scaling based on width of container (CSS => SVG)no