---
title: <rect>
slug: Web/SVG/Element/rect
translation_of: Web/SVG/Element/rect
original_slug: Web/SVG/Element/사각형
---
<div>{{SVGRef}}</div>

<p><span style="line-height: 1.5;"><strong>&lt;rect&gt;</strong> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다.</span> 또한 모서리가 둥근 사각형을 만들 수 있다.</p>

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

<pre class="brush: html; highlight[4]">&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Simple rect element --&gt;
  &lt;rect x="0" y="0" width="100" height="100" /&gt;

  &lt;!-- Rounded corner rect element --&gt;
  &lt;rect x="120" y="0" width="100" height="100" rx="15" ry="15" /&gt;
&lt;/svg&gt;</pre>

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

<h2 id="컨택스트_사용해보기">컨택스트 사용해보기</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">카테고리</th>
   <td>기본 도형 요소, 그래픽 요소, 모형 요소</td>
  </tr>
  <tr>
   <th scope="row">허용 된 콘텐츠</th>
   <td>Any number of the following elements, in any order:<br>
    <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br>
    <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td>
  </tr>
  <tr>
   <th scope="row">규범 문서</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Example_2">Example</h2>

<h3 id="간단한_rect_사용하기">간단한 <code>rect</code> 사용하기</h3>

<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p>

<h3 id="라운드_코너와_rect_사용하기">라운드 코너와 <span style="font-family: 'Courier New','Andale Mono',monospace; font-weight: inherit; line-height: normal;">rect </span><span style="font-size: 1.7142857142857142rem;">사용하기</span></h3>

<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p>

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

<h3 id="전역_속성">전역 속성</h3>

<ul>
 <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
 <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">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("x") }}</li>
 <li>{{ SVGAttr("y") }}</li>
 <li>{{ SVGAttr("width") }}</li>
 <li>{{ SVGAttr("height") }}</li>
 <li>{{ SVGAttr("rx") }}</li>
 <li>{{ SVGAttr("ry") }}</li>
</ul>

<h2 id="DOM_Interface">DOM Interface</h2>

<p>This element implements the <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> interface.</p>

<h2 id="Browser_compatibility">Browser compatibility</h2>

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

<h2 id="See_also">See also</h2>

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