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

<p><span class="seoSummary">Das <strong><code>&lt;rect&gt;</code></strong> Element ist ein SVG Element, aus welchem Rechtecke mittels einer definierten Eckposition, einer Höhe und einer Breite erstellt werden können.</span> Zudem sind Rechtecke mit abgerundeten Ecken möglich.</p>

<h2 id="Nutzungskontext">Nutzungskontext</h2>

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

<h2 id="Attribute">Attribute</h2>

<h3 id="Globale_Attribute">Globale Attribute</h3>

<ul>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li>
 <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li>
 <li>{{SVGAttr("class")}}</li>
 <li>{{SVGAttr("style")}}</li>
 <li>{{SVGAttr("externalResourcesRequired")}}</li>
 <li>{{SVGAttr("transform")}}</li>
</ul>

<h3 id="Spezifische_Attribute">Spezifische Attribute</h3>

<dl>
 <dt>{{SVGAttr("x")}}</dt>
 <dd>Legt die x-Koordinate des rect-Elements fest.</dd>
 <dt>{{SVGAttr("y")}}</dt>
 <dd>Legt die y-Koordinate des rect-Elements fest.</dd>
 <dt>{{SVGAttr("width")}}</dt>
 <dd>Legt die Breite des rect-Elements fest.</dd>
 <dt>{{SVGAttr("height")}}</dt>
 <dd>Legt die Höhe des rect-Elements fest.</dd>
 <dt>{{SVGAttr("rx")}}</dt>
 <dd>Legt den horizontalen Eckradius des rect-Elements fest.</dd>
 <dt>{{SVGAttr("ry")}}</dt>
 <dd>Legt den vertikalen Eckradius des rect-Elements fest.</dd>
</dl>

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

<p>Dieses Element implementiert das {{domxref("SVGRectElement")}} Interface.</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einfache_Nutzung_des_rect-Elements">Einfache Nutzung des rect-Elements</h3>

<h4 id="SVG">SVG</h4>

<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="100" height="100"/&gt;
&lt;/svg&gt;</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Simple_rect_usage", 120, 120)}}</p>

<h3 id="Rect-Element_mit_abgerundeten_Ecken">Rect-Element mit abgerundeten Ecken</h3>

<h4 id="SVG_2">SVG</h4>

<pre class="brush: html; highlight[4]">&lt;svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg"&gt;

  &lt;rect x="10" y="10" width="100" height="100" rx="15" ry="15"/&gt;
&lt;/svg&gt;</pre>

<h4 id="Ergebnis_2">Ergebnis</h4>

<p>{{EmbedLiveSample("Rect_with_rounded_corners", 120, 120)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
   <td>{{Spec2('SVG2')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '&lt;rect&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Erste Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kombatibilität">Browser Kombatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop('1.8')}}</td>
   <td>{{CompatIE('9.0')}}</td>
   <td>{{CompatOpera('8.0')}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>{{CompatAndroid('3.0')}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile('1.8')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>Die Tabelle stützt sich auf <a href="/en-US/SVG/Compatibility_sources">diese Quellen</a>.</p>

<h2 id="Siehe_auch">Siehe auch</h2>

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