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>
