SVGを使って円や楕円を作ります。SVGでは円の作り方は複数あって、用途によって使い分けるとよいと思います。
まずは単純な円を作るcircleタグ。
<svg width="200" height="200" class="bg">
<circle cx="100" cy="100" r="90" stroke="black" stroke-width="1" fill="blue"></circle>
</svg>cx=円の中心のX座標
cy=円の中心のY座標
r=円の半径 (rx=半径横指定 ry=半径縦指定)
円弧で円を描く
<svg width="200" height="200" class="bg">
<path d="M 25,100 A 75,75 0 1,1 175,100 A 75,75 0 1,1 25,100 z" stroke="black" fill="green"></path>
</svg>円弧をだけを描く
<svg width="200" height="200" class="bg">
<path stroke="black" fill="none" d="
M 0,0
A 200,200 0 0 0 200,200
"></path>
</svg>四角の角を丸くして円を描く
<svg width="200" height="200" class="bg">
<rect x="10" y="10" width="120" height="120" rx="60" ry="60" stroke="black" stroke-width="1" fill="orange"></rect>
</svg>
