---
title: circle
slug: Web/SVG/Element/circle
translation_of: Web/SVG/Element/circle
---
<div>{{SVGRef}}</div>

<p><code><strong>&lt;circle&gt;</strong></code> <a href="https://developer.mozilla.org/ja/docs/Web/SVG">SVG</a> 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。</p>

<h2 id="使用可能な場所">使用可能な場所</h2>

<p>{{svginfo}}</p>

<h2 id="属性値">属性値</h2>

<h3 id="グローバル属性">グローバル属性</h3>

<ul>
 <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Conditional_processing_attributes">条件処理属性</a></li>
 <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Core_attributes">コア属性</a></li>
 <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Graphical_event_attributes">グラフィカルイベント属性</a></li>
 <li><a href="https://developer.mozilla.org/ja/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h3 id="専用属性">専用属性</h3>

<ul>
 <li>{{SVGAttr("cx")}}</li>
 <li>{{SVGAttr("cy")}}</li>
 <li>{{SVGAttr("r")}}</li>
</ul>

<h2 id="DOM_インターフェイス">DOM インターフェイス</h2>

<p>この要素は <a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement">SVGCircleElement</a> インターフェイスを実装しています。</p>

<h2 id="例">例</h2>

<h3 id="SVG">SVG</h3>

<div id="Example">
<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="100" cy="100" r="100"/&gt;
&lt;/svg&gt;
</pre>
</div>

<h3 id="出力">出力</h3>

<p>{{EmbedLiveSample('Example', 200, 200)}}</p>

<h2 id="仕様">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG2", "shapes.html#CircleElement", "&lt;circle&gt;")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "shapes.html#CircleElement", "&lt;circle&gt;")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>



<p>{{Compat("svg.elements.circle")}}</p>

<h2 id="関連情報">関連情報</h2>

<ul>
 <li>{{ SVGElement("ellipse") }}</li>
</ul>