Cách làm việc với SVG (Scalable Vector Graphics) trong HTML5

SVG là ngôn ngữ XML mô tả đồ họa vector 2D, phù hợp cho biểu đồ, sơ đồ, biểu đồ tròn, đồ thị tọa độ X,Y.

Để nhúng SVG trực tiếp vào HTML5, dùng cặp thẻ <svg>...</svg> với namespace:

<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>

Các phần tử hình cơ bản:

• <circle> – hình tròn
• <rect> – hình chữ nhật
• <line> – đường thẳng
• <ellipse> – elip
• <polygon> – đa giác

Ngoài ra, có thể nhúng SVG qua thẻ <img>, <iframe>, <object>, <embed>.

Ví dụ: Vẽ hình tròn

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG Circle</title>
  </head>
  <body>
    <h2>HTML5 SVG Circle</h2>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
      <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
    </svg>
  </body>
</html>