Вот конечный результат, в котором нет лишних пустых полей, шестиугольник расположен по центру SVG и код оптимизирован (один знак после запятой вместо 14-ти)
Красная рамка это границы холста SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="346.4" height="400" viewBox="222.8 218 346.4 400" style="border:1px solid crimson">
<polygon id="poly" points="569.2 518 396 618 222.8 518 222.8 318 396 218 569.2 318" fill="none" stroke="orange" stroke-width="4"/>
</svg>
<script>
console.log(poly.getBBox())
</script>
Как это сделано:
Полигону присвоен id="poly"
и с помощью метода JS getBBox()
выводятся минимально, достаточные координаты, ширина и высота прямоугольника описывающего полигон.
Эти данные подставляются во viewBox="222.8 218 346.4 400"
width="x"
, hieght="y"