Can you create a truly circular SVG button?

I've been at this for days and cannot find any support on the issue.

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 border-radius property (which worked fine), but now I'm trying to upgrade to SVG shapes. What I'm discovering is that there is always an invisible square box around any SVG element (the viewbox I think). This means that I'm able to click the button without the cursor actually being on the button (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.

Is there a way to create a truly circular SVG button?

Solution

This issue has nothing to do with that you're using an SVG, and everything to do with that you're using HTML.

HTML by default is all boxes. There is no rounding for the most part.

You have two viable options that can be used.

Use border-radius in conjunction with the SVG. Putting the correct values will not trim the SVG, it will only remove the clickable corners.
Use a map. This has been around for a while, and thus is supported in all the major browsers with a uniform syntax.

I'd suggest #1, as it is much easier. #2 would require you to know more information (the radius and the center point).