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

<p><code>circle(원)은</code> 엘리먼트는 중심점과 반지름에 기초하여 원을 생성하는데 사용되는  SVG의 기본 모양이다. </p>

<div id="Example">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

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

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

<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2>

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

<h2 id="예제">예제</h2>

<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
&lt;svg viewBox="0 0 120 120" version="1.1"
  xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="60" cy="60" r="50"/&gt;
&lt;/svg&gt;</pre>

<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p>

<h2 id="속성들">속성들</h2>

<h3 id="글로벌_속성들">글로벌 속성들</h3>

<ul>
 <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">조건부 처리 속성들</a> »</li>
 <li><a href="/en-US/SVG/Attribute#Core_attributes">주요 속성들</a> »</li>
 <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">그래픽 이벤트 속성들</a> »</li>
 <li><a href="/en-US/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>이 엘리먼트는 {{ domxref("SVGCircleElement") }} 를 구현한다..</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="See_also">See also</h2>

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