Cách vẽ hình chữ nhật trong HTML5 SVG

SVG dùng phần tử <rect> để vẽ hình chữ nhật. Đây là cách cơ bản nhất tạo hình hộp trong đồ họa vector.

Ví dụ

Mã sau vẽ hình chữ nhật màu xanh lá:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>SVG</title>
  </head>
  <body>
    <h2>HTML5 SVG Rectangle</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
      <rect width="200" height="100" fill="green"/>
    </svg>
  </body>
</html>

Thuộc tính hữu ích: x, y (vị trí góc trên-trái), width, height, rx, ry (bo góc), fill, stroke, stroke-width (màu tô, viền).