Cách vẽ hình dạng bằng SVG trong HTML5

SVG (Scalable Vector Graphics) là ngôn ngữ XML mô tả đồ họa 2D. Trình duyệt hiện đại hiển thị SVG gốc như hình ảnh raster. Bạn có thể vẽ hình tròn, chữ nhật, đường thẳng, elip, đa giác... dễ dàng.

Ví dụ: Vẽ hình chữ nhật

Mã sau dùng <rect> để vẽ hình chữ nhật 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>

Các hình cơ bản SVG: <circle>, <rect>, <line>, <ellipse>, <polygon>, <polyline>, <path>.