The dotted line is done using SVG?

In PSD template is drawn dotted lines from one step to another between the different steps. I need to make up this composition. I found a way to do this using SVG like this:
<svg width="100" height="100">
 <circle r="1" cx="70" cy="50" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="54" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="58" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="62" fill="black" stroke-width="5"/>
</svg>


Am I doing it right or is there some other proper way?
Or another question, is there a map of the country (just cut along the contour of a solid colour, without connecting real cards, etc.) and the point of cities, when you hover over that shows a window with additional information. At first I thought it's some kind of JS plugins, had a look - nothing there. Thinking of doing this too using SVG points-the circles on the map. Also want to ask, is this right or are there other ways?
June 7th 19 at 14:56
2 answers
June 7th 19 at 14:58
Perhaps a more correct solution would be border:2px dashed red;
https://jsfiddle.net/Politonius/7gfwgsa9/8/
June 7th 19 at 15:00
Frolic, edit:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100" height="100">
 <circle r="1" cx="70" cy="50" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="54" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="58" fill="black" stroke-width="5"/>
 <circle r="1" cx="70" cy="62" fill="black" stroke-width="5"/>
 <path d="m 0,40 at 30.30" style="fill:none;fill-rule:evenodd;stroke:#000000;
stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;
stroke-miterlimit:4;stroke-dasharray:3,3;stroke-dashoffset:0"/>
</svg>

Find more questions by tags HTMLCSSSVG