SVG icon text editor

HTML

<div class="loader">
<img src="http://gifimage.net/wp-content/uploads/2017/08/spinner-gif-13.gif"/>
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 16 16">
 <text class="small" x="0" y="50%" fill="red" stroke="none">SVG-TEXT</text>
<!--<path id="svgspin" d="m8 0c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8m4.88 9.21c-.57 2.23-2.58 3.79-4.88 3.79s-4.31-1.56-4.88-3.79c-.1-.38.13-.76.51-.86.06-.02.12-.02.18-.02.32 0 .6.22.68.53.41 1.61 1.86 2.73 3.52 2.73s3.1-1.12 3.52-2.73c.08-.31.36-.53.68-.53.06 0 .12.001.18.02.18.05.34.16.43.33s.12.35.07.54"></path>-->
</svg>
</div>

CSS

body {
  background: #eee;
  padding: 50px 500px;
  font: normal 12px/16px Courier;
}

.container  {
  background: #f4f5f9;
  text-align: center;
  vertical-align: middle;
  margin: 100px;
  padding-bottom: 100px;
  box-shadow: 0px 30px 40px -20px rgba(0, 0, 0, 0.6);
}

#svgspin {
  text-align: center;
  animation: spin .8s linear infinite; 
  display: block; 
  fill: #223344; 
  float: left; 
  height: 150px; 
  margin: 0 5px 5px 0; 
  width: 150px;
  position: relative;
  margin: 50px auto;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg); 
    transform:rotate(360deg);
  }
}

JavaScript

var text = $('.small');
text.html('1234567');