SVG from Zero to Senior · Part 2 — The <path> Element

Ở Phần 1 con học sáu hình. Nhưng mở bất kỳ bộ icon, logo, hay bản đồ thật nào con sẽ thấy một element lặp đi lặp lại: <path>. Path là con ngựa thồ của SVG — nó vẽ được mọi hình khác và cả triệu hình mà chúng không vẽ được.

Sức mạnh của nó nằm ở một thuộc tính, d, chứa một ngôn ngữ vẽ tí hon. Hôm nay ta làm ngôn ngữ đó hết đáng sợ.

Kéo anchor và control point trong trình dựng — cảm nhận từng lệnh uốn cong đường — rồi mới đọc luật.

Mở demo đầy đủ:

Đọc thuộc tính d

Chuỗi d là một dãy lệnh, mỗi lệnh là một chữ cái theo sau bởi các con số. Hãy coi nó như chỉ dẫn cho một cây bút.

<path d="M 10 10 L 90 10 L 90 90 Z" />

Đọc to: “Di bút tới (10,10). Vẽ line tới (90,10). Line tới (90,90). Đóng path.” Đó là một tam giác vuông.

Quy tắc vàng về viết hoa:

Hoa = tuyệt đối (tính từ gốc). Thường = tương đối (tính từ chỗ bút đang đứng).

M 50 50 nhảy tới điểm (50,50). m 50 50 nhảy 50 sang phải và 50 xuống từ đây. Mọi lệnh dưới đây đều có cả hai dạng.

M và L — di và kẻ

• nhấc bút và đặt xuống, không vẽ gì. Mọi path phải bắt đầu bằng một cái.
• vẽ đường thẳng tới một điểm.
• tắt cho line ngang / dọc (mỗi cái một số).
• vẽ line thẳng về M gần nhất.

<!-- A box, the verbose way then the tidy way -->
<path d="M 10 10 L 90 10 L 90 90 L 10 90 Z" />
<path d="M 10 10 H 90 V 90 H 10 Z" />   <!-- identical, fewer numbers -->

C — Bézier bậc ba (cái con dùng nhiều nhất)

Đường thẳng nhàm chán. Đường cong cần control point — nam châm kéo đường mà không nằm trên nó.

<path d="M 10 80 C 40 10, 65 10, 95 80" />

• Đường cong bắt đầu ở anchor M (10,80) và kết thúc ở (95,80).
• 40 10 là control point cho điểm đầu; 65 10 cho điểm cuối.
• Đường cong rời điểm đầu hướng về control point của nó, và tới điểm cuối đi từ control point của nó.

Quy tắc tiếp tuyến đó là toàn bộ trực giác. Trong demo, các đường nét đứt xanh chính là các tiếp tuyến đó — kéo điểm xanh và xem đường cong đi theo.

Để nối các đường cong mượt, dùng S (cubic mượt): nó tự phản chiếu control point trước đó để mối nối không gãy.

Q và T — Bézier bậc hai (rẻ hơn)

Đường cong bậc hai chia sẻ một control point cho cả hai đầu.

<path d="M 10 80 Q 50 10, 90 80" />   <!-- one control point at (50,10) -->

Ít điều khiển, ít số hơn — tốt cho cung đơn giản và font. T tiếp tục một đường bậc hai một cách mượt mà, như S với bậc ba.

A — cung elip (cái đáng sợ)

Lệnh arc có nhiều tham số nhất, nên người ta sợ nó. Nó chỉ là chính xác thôi:

<path d="M 70 140 A 90 60 0 0 1 230 140" />
<!--          rx ry rot large sweep  end-x end-y -->

• bán kính của elip mà cung được cắt ra.
• nghiêng elip theo độ.
• lấy cung nhỏ hay cung lớn.
• cong theo chiều kim đồng hồ hay ngược.

Giữa hai điểm và một elip cho trước có bốn cung khả dĩ; hai cờ đó chọn cái nào. Lật chúng trong trình dựng và xem cung nhảy. Arc tạo nên biểu đồ tròn, đồng hồ đo, và đường nối bo góc.

Vì sao senior hiếm khi viết path bằng tay

Con gần như không bao giờ gõ d bằng tay cho art phức tạp — con vẽ trong Figma/Illustrator rồi export. Nhưng con phải đọc nó trôi chảy để: debug một icon hỏng, chỉnh control point bằng tay, viết animation vẽ-đường ở Phần 6, và sinh path từ dữ liệu ở Phần 9.

Lời cảnh báo của sư phụ

• Luôn bắt đầu bằng M. Path không có moveto thì không vẽ gì.
• Hoa thường rất quan trọng. Một chữ l thường lạc làm tuyệt đối thành tương đối và làm hình văng tứ tung.
• Dấu phẩy tuỳ chọn, dấu cách không phải lúc nào cũng vậy. M10 10 ổn; M1010 là một số. Gọn gàng: M 10 10.

Luyện tập, không thì coi như chưa học

1. Dựng lại tam giác ba cách: bằng <polygon>, bằng lệnh L, và bằng H/V khi có thể.
2. Vẽ nụ cười: một đường Q, rồi kéo control point trong demo để thành mặt mếu.
3. Làm một miếng bánh: M về tâm, L ra vành, A chạy theo vành, Z quay về.

Phần tiếp theo

Giờ con tả được mọi đường viền. Nhưng đường viền không sơn thì vô hình. Ở Phần 3 ta làm mọi thứ đẹp lên: fill và fill rule, cả họ stroke (stroke-width, linecap, linejoin, dasharray), rồi gradient tuyến tính và toả tròn cùng pattern lát gạch — hộp màu của SVG.