title: Can you create a truly circular SVG button?
body: <p>I've been at this for days and cannot find any support on the issue.</p>
  
  <p>So, I'm creating a main page for my personal website that features circular buttons of varying sizes. Initially I was creating the circles using the <strong>border-radius property</strong> (which worked fine), but now I'm trying to upgrade to <strong>SVG shapes</strong>. What I'm discovering is that there is always an invisible square box around any SVG element (the <strong>viewbox</strong> I think). This means that I'm able to click the button <strong>without the cursor actually being on the button</strong> (i.e. the corners of the viewbox). This would not be a problem if the buttons were in a line and all the same size, but they're not in a line and some are much bigger than others.</p>
  
  <p>Is there a way to create a truly circular SVG button?</p>