在可縮放向量圖形 (SVG) 中， <circle>元素用於建立圓形。以下是在 SVG 中使用<circle>元素的一些方法：

基本圈：

 XML
 <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

此範例建立一個圓心為 (50, 50)、半徑為 40、厚度為 3 的黑色邊框和紅色填滿的圓。

動態圈：

您可以使用 JavaScript 動態變更圓的屬性：

 XML
 <svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <script>
    // Example of changing the circle's color on click
    document.getElementById('myCircle').addEventListener('click', function() {
      this.setAttribute('fill', 'blue');
    });
  </script>
</svg>

動畫圈：

使用 SVG 動畫對圓進行動畫處理：

 XML
 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="r" from="40" to="20" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

在此範例中，圓的半徑以動畫方式在 2 秒的持續時間內從 40 變為 20，且動畫無限重複。

漸層：

您可以使用漸層來填滿圓形：

 XML
 <svg width="100" height="100">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url(#grad1)" />
</svg>

此範例對圓的填充使用徑向漸變，從白色過渡到藍色。

這些只是幾個範例，您還可以使用更多屬性和屬性來自訂 SVG 中的圓圈。