svg viewBox size and positioning

Question

I am just starting to work with svg in html and am having some difficulty in manipulating the viewbox / svg window size.

I am working with this example

https://codepen.io/musgrove/pen/azGXNR

I would like to have the svg window be trimmed down to the size of the graphic height, which would allow it to be used in conjunction with my html page.

I would like the width to remain at 100÷ but have the height of the svg be limited to the actual text being displayed. Otherwise there is a large buffer of space above and below the svg text object.

I am unable to set offsets to correct this as the offset would dynamically change based on the size of the font in relation to the size of the device or div that it's wrapped in.

Here is the example code

Html

svg {
  position: relative;
  width: auto;
  height: auto;
  /*if i set this to a specific height it does not work*/
}

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}

.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

.indexNewTitle {
  background: #212121;
  /*background-size: .2em 100%;*/
  font: 14.5em/1 Open Sans, Impact;
  /*lowering the font size ruins the effect being sought in the example */
  /*text-transform: uppercase;*/
  /*margin: 0;*/
}

<div class="indexNewTitle">

  <svg viewBox="0 0 1320 300">

    <!-- Symbol -->
    <symbol id="s-text">
    <text text-anchor="middle"
    x="50%" y="50%" dy=".35em">
    Test
    </text>
    </symbol>

    <!-- Duplicate symbols -->
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>
    <use xlink:href="#s-text" class="text"
    ></use>

    </svg>

</div>

I have tried setting the viewbox to a smaller size, specifying the svg height, changing the font size and placing the svg in a restricted div height without any luck.

Any help would be much appreciated.

Thanks