И возможно ли не задавать Viewbox? Лучше ли с ним или без него, не
совсем понимаю его роль...
viewBox задаёт физические размеры SVG холста и выполняет важную роль при масштабировании и без него невозможно добиться адаптивности SVG изображений.
Допустим вы решили создать иконку 48x48px
. Для этого указываете viewBox="0 0 48 48"
Вторая задача: сделать минимальные отступы от краев SVG холста

так как координаты центра окружности находятся в центре svg холста, то она будет привязана к левому верхнему углу (0,0)
SVG холста
Изменение ширины и высоты width
, height
изменяют только отображаемый размер, но привязка к верхнему, левому углу остается.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">
<circle cx="24" cy="24" r="24" fill="red"/>
</svg>
UPDATE
по уточнениям в комментариях:
Тёмная рамка показывает границы отображаемого SVG холста style="border:1px solid;"
У трех иконок размеры пользовательского окна просмотра (viewport) разные: width:"48"
; width:"96"
; width:"144"
но физические размеры, заданные viewBox="0 0 48 48"
остаются одинаковыми - 48px
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="48" height="48" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ1" cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="96" height="96" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ2" cx="24" cy="24" r="24" fill="red" />
</svg>
<svg width="144" height="144" viewBox="0 0 48 48" style="border:1px solid;">
<circle id="circ3" cx="24" cy="24" r="24" fill="red"/>
</svg>
<script>
console.log(circ1.getBBox())
console.log(circ2.getBBox())
console.log(circ3.getBBox())
</script>
animateMotion