Draw a hollow circle in SVG

Question

I'm not sure how to approach drawing a hollow circle in SVG.

I would like a ring shape filled with a colour and then have a black outline.

The way I thought about doing it was have 2 circles, one with a smaller radius than the other. The problem is when I fill them, how do I make the smaller circle take the same fill colour as what it sits on?

Answer 1

Just use fill="none" and then only the stroke (outline) will be drawn.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />  </svg> 

Or this if you want two colours:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />     <circle cx="100" cy="50" r="39" stroke="red" stroke-width="2" fill="none" />  </svg>