В самом начале у тебя идет
<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">
Здесь в параметре viewbox задаются внутренние координаты (от 0 до 10 по оси X) и от (0 до 6.7 по оси Y).
Тоесть, например, по оси X твои 170px переводятся во внутренних координатах в 11 единиц(от 0 до 10).
Координаты у элементов внутри svg задаются в этих внутренних единицах.
Например, вот первый элемент в маске (прямоугольник):
<rect x=1 y=1 width="8" height="5" fill="white"></rect>
Он начинается по x с координаты 1 (не 0) и по y тоже с не нулевой координаты.
Width - длина в этих внутр единицах, и тд. Поизменяй эти цифры, посмотри что измениться, сам всё поймешь.
У кругов в маске (circle) координаты и радиус также заданы.
Если есть возможность на CSS управлять этими размерами было бы супер.
Да, просто даешь элементам внутри svg имя класса или id, чтобы выглядело вот так (class="circle1"):
<circle class="circle1" cx="9" cy="1" r="1" fill="black"></circle>
И потом в css:
.circle1{
r: 3;
cx: 5;
}