title: How can I convert a SVG circle made with paths to use a circle object?
body: <p>I have this SVG:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 286.054 286.054" style="enable-background:new 0 0 286.054 286.054;" xml:space="preserve" width="512px" height="512px" class=""&gt;&lt;g&gt;&lt;g&gt;
      &lt;path d="M143.027,0C64.031,0,0,64.04,0,143.027c0,78.996,64.031,143.027,143.027,143.027   s143.027-64.031,143.027-143.027C286.054,64.04,222.022,0,143.027,0z M143.027,259.236c-64.183,0-116.209-52.026-116.209-116.209   S78.844,26.818,143.027,26.818s116.209,52.026,116.209,116.209S207.21,259.236,143.027,259.236z M173.232,180.205h-32.038   c15.661-18.459,40.852-39.753,40.852-63.736c0-21.91-16.564-35.882-39.216-35.882c-22.661,0-43.847,17.977-43.847,39.717   c0,6.731,4.604,12.586,13.445,12.586c17.691,0,8.108-28.498,29.294-28.498c7.554,0,13.266,6.204,13.266,13.284   c0,6.204-3.138,11.558-6.454,16.046c-13.999,18.969-30.581,34.496-45.867,51.579c-1.841,2.065-4.246,5.176-4.246,8.796   c0,7.938,6.266,11.38,14.365,11.38h61.528c6.999,0,13.266-4.568,13.266-12.497C187.58,185.05,181.331,180.205,173.232,180.205z" data-original="#2394BC" class="active-path" data-old_color="#2394BC" fill="#555555"/&gt;
  &lt;/g&gt;&lt;/g&gt; &lt;/svg&gt;
  </code></pre>
  
  <p>Which looks like this in illustrator:</p>
  
  <p><a href="https://i.stack.imgur.com/JxVPL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JxVPL.png" alt="enter image description here"></a></p>
  
  <p>What I want is a SVG that has an outer circle like this and then the number inside:</p>
  
  <p>So I can change the circle and give it a different fill color. </p>
  
  <p>What would be the best way to go about this? Should I take the design in Illustrator remove the outer circle and add a new circle? Sorry but I am completely new to illustrator. Is there a circle shape I can add with illustrator and if I add that will it add that like this:</p>
  
  <pre><code> &lt;circle r="130" cx="143" cy="143" fill="none" stroke="#444444" stroke-width="10" class="active-path" /&gt;
  </code></pre>
  
  <p>to the svg?</p>