<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Imágenes y Figuras Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 720px;">
    <h3 class="fw-bold mb-3">Imágenes y Formas en Kilopolis</h3>

    <div class="row g-4 align-items-center">
      <!-- 1. Avatar circular con SVG nativo -->
      <div class="col-md-4 text-center">
        <svg class="rounded-circle shadow-sm mb-2 border border-3 border-primary-subtle" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#2563eb"/>
          <text x="50%" y="54%" fill="#ffffff" font-family="Arial" font-size="28" font-weight="bold" dominant-baseline="middle" text-anchor="middle">JV</text>
        </svg>
        <h6 class="fw-bold mb-0">Jorge Mario Vargas</h6>
        <small class="text-muted">.rounded-circle</small>
      </div>

      <!-- 2. Miniatura decorativa con .img-thumbnail -->
      <div class="col-md-4 text-center">
        <div class="img-thumbnail d-inline-block shadow-sm">
          <svg width="120" height="90" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#0f172a"/>
            <text x="50%" y="50%" fill="#38bdf8" font-family="Arial" font-size="14" dominant-baseline="middle" text-anchor="middle">.img-thumbnail</text>
          </svg>
        </div>
        <p class="small text-muted mt-2 mb-0">Marco de miniatura</p>
      </div>

      <!-- 3. Figura semántica con figure-caption -->
      <div class="col-md-4 text-center">
        <figure class="figure mb-0">
          <svg class="figure-img rounded-3 shadow-sm" width="130" height="90" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="#059669"/>
            <text x="50%" y="50%" fill="#ffffff" font-family="Arial" font-size="13" font-weight="bold" dominant-baseline="middle" text-anchor="middle">Gráfica 2026</text>
          </svg>
          <figcaption class="figure-caption text-center small">
            Figura: Crecimiento Kilopolis
          </figcaption>
        </figure>
      </div>
    </div>
  </div>

</body>
</html>