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>