Cách vẽ đường thẳng (line) trong HTML5 SVG?

SVG (Scalable Vector Graphics) mô tả đồ họa 2D bằng XML. Để vẽ đường thẳng, dùng thẻ <line>.

Ví dụ: Vẽ đường chéo đỏ

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 SVG Line</title>
    <style>
        #svgelem {
            position: relative;
            left: 10%;
            transform: translateX(-20%);
        }
    </style>
</head>
<body>
    <h2>Đường thẳng SVG</h2>
    <svg id="svgelem" width="300" height="200" xmlns="https://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="100" y2="100" style="stroke:red; stroke-width:2" />
    </svg>
</body>
</html>

Thuộc tính của <line>:

Thuộc tính	Mô tả
x1	Tọa độ X điểm đầu.
y1	Tọa độ Y điểm đầu.
x2	Tọa độ X điểm cuối.
y2	Tọa độ Y điểm cuối.
stroke	Màu đường (color).
stroke-width	Độ dày đường.
stroke-dasharray	Đường nét đứt (VD: "5,5").
stroke-linecap	butt \| round \| square (đầu đường).

Ví dụ đường nét đứt, bo tròn đầu:

<line x1="20" y1="20" x2="280" y2="180"
      style="stroke:blue; stroke-width:3; stroke-dasharray:10,5; stroke-linecap:round" />

Các hình cơ bản SVG khác:

<rect> — Hình chữ nhật.
<circle> — Hình tròn (cx, cy, r).
<ellipse> — Hình elip.
<polyline> — Đường gãy (không khép kín).
<polygon> — Đa giác (khép kín).
<path> — Đường vẽ phức tạp nhất (dùng lệnh M, L, C, Q, Z...).