Double stroke color of circle in svg
Sadly, you can't set an SVG to have a double stroke, only a dashed or solid stroke.
Instead, just create an element exactly the same but reduce the size/radius of it by however much you require.
.circle {
fill: none;
stroke: black;
}<svg height="100" width="100">
<circle class="circle" cx="50" cy="50" r="40" stroke-width="1" />
<circle class="circle" cx="50" cy="50" r="38" stroke-width="1" />
</svg>In case anyone is interested in doing this with squares/rectangles as well as without multiple <rect> or <circle> entries, you can use the outline property to achieve the double line border in SVG and the border-radius property to make it work with circles.
.double {
fill: none;
stroke: red;
outline: 4px double black;
outline-offset: 2px;
}
.circle {
border-radius: 50%;
}<svg height="100" width="200">
<rect class="double" height="50" width="50" x='25' y='25' />
<circle class="double circle" r="25" cx='150' cy='50' />
</svg>