rect

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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>