---
title: <rect>
slug: Web/SVG/Element/rect
tags:
  - SVG
  - SVG Element
  - SVG Reference
translation_of: Web/SVG/Element/rect
---
<div>{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}</div>

<p>L'élément <code>rect</code> est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la  position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis.</p>

<h2 id="Usage">Usage</h2>

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

<h2 id="Exemple">Exemple</h2>

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

<pre class="brush: html"><code>&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;</code></pre>

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

<h2 id="Attributs">Attributs</h2>

<h3 id="Attributs_Globaux">Attributs Globaux</h3>

<ul>
 <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li>
 <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li>
 <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li>
 <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>

<h3 id="Attributs_spécifiques">Attributs spécifiques</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="Interface_DOM">Interface DOM</h2>

<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p>

<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>

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

<p> </p>

<h2 id="Voir_également">Voir également</h2>

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