JSFiddle - React, Tailwind, and code Playground

by Carlos Quintero

HTML

<h4>
Cambie el Valor del campo para redimensionar el grafico SVG
</h4>
<input type="number" id="ancho" min="50" max="500" value="50"/><br><br><br><br>
<div id="imagensvg" style="width:50px">
  <svg width="100%" viewBox="0 0 270 100" style="margin:-2em 0em -3em 0em">
               <defs>
                 <radialGradient id="radial" cx="50%" cy="50%" fx="25%" fy="25%">
                   <stop offset="0%" stop-color="#60bafc"></stop>
                   <stop offset="50%" stop-color="#409adc"></stop>
                   <stop offset="100%" stop-color="#005a9c"></stop>
                 </radialGradient>
                 <path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"></path>
               </defs>

               <circle cx="138" cy="50" r="38" fill="url(#radial)" stroke="#005a9c"></circle>

               <text font-family="Verdana" font-size="20" fill="#ff9900"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#curve" method="stretch" style="visibility: visible;">Scalable       <tspan fill="white">Vector</tspan> Graphics</textPath></text>
  </svg>
</div>

JavaScript

$("#ancho").change(function(){
    var ancho = $(this).val();
    $("#imagensvg").css('width',ancho);
});