rect

Baseline

Ampliamente disponible

Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.

* Algunas partes de esta característica pueden tener distintos niveles de compatibilidad.

Ver la compatibilidad completa
Más información

El elemento rect es una forma básica de SVG, usada para crear rectángulos basada en la posición de una esquina, su alto y ancho. También podría ser usada para crear rectángulos con esquinas redondeadas.

Contexto de uso

Categorias	Elemento de forma básica, Elemento gráfico, Elemento de forma
Contenido permitido	Cualquier número de los siguientes elementos, en cualquier orden: Elementos de animación Elementos descriptivos

Ejemplo

Uso simple de `rect`

html,
body,
svg {
  height: 100%;
}

html

<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" />
</svg>

`rect` con esquinas redondeados

html,
body,
svg {
  height: 100%;
}

html

<?xml version="1.0"?>
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" rx="15" ry="15" />
</svg>