Для этого надо объединить два круга и линию в одну группу
Рисуете в редакторе два круга, заполняете из цветом, далее рисуете линию соединяющую центры кругов.
Далее нажав SHIFT делаете выделение всех объектов и объединяете их в группу нажав на иконку (показана красной стрелкой) или просто нажимаете CTRL+G
Всё объекты одно целое и их можно перемещать по холсту, как одно целое.

Ниже код svg этих фигур
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 800 600" >
<g id="groupCircle">
<circle cx="100" cy="100" r="50" fill="red"/>
<circle cx="300" cy="100" r="50" fill="blue"/>
<polyline stroke="black" stroke-width="3px" fill="black"
points=" 100,100 300,100" />
</g>
</svg>