Как установить правильные координаты Inline SVG Circle?

Мне хотелось бы показать общую технику, как с позиционировать элемент SVG, чтобы не было лишнего пустого пространства вокруг элемента.

1. Для наглядности сделаем границы холста SVG видимыми
   Для этого в шапке файла SVG напишем стиль CSS

style="border:1px solid"

<svg height="100" width="100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

2. Следующим шагом является определение параметров width, height, x, y,прямоугольника, ограничивающего окружность, с помощью метода JS getBBox()

<svg height="100" width="100" viewBox="0 0 100 100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

По результатам видно, что ширина прямоугольника составляет 80px, отступы от начала холста SVG 10px, справа отступ тоже 10px
итого: 10 + 80 + 10 = 100px

3. Если вы хотите, чтобы не было пустого пространства вокруг svg элемента необходимо убрать эти отступы, уменьшив ширину холста и добавить немного пространства, чтобы умещалась обводка окружности шириной 3px

<svg height="84" width="84" viewBox="0 0 84 84" style="border:1px solid">
  <circle id="circ" cx="42" cy="42" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

Рамку вокруг холста можно удалить, так как она использовалась для визуальной отладки позиционирования.

_{Свободный перевод ответа от участника @Alexandr_TT.}