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

In Part 1 you learned six shapes. {Ở Phần 1 con học sáu hình.} But open any real icon set, logo, or map and you will see one element over and over: <path>. {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>.} The path is the workhorse of SVG — it can draw every other shape and a million it cannot. {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.}

Its power lives in one attribute, d, which holds a tiny drawing language. {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.} Today we make that language stop being scary. {Hôm nay ta làm ngôn ngữ đó hết đáng sợ.}

Drag the anchors and control points in the builder — feel how each command bends the line — then read the rules. {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.}

Open the full demo {Mở demo đầy đủ}: /tools/svg-path-demo/.

Reading the d attribute {Đọc thuộc tính d}

The d string is a sequence of commands, each a letter followed by numbers. {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ố.} Think of it as instructions to a pen. {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" />

Read aloud: “Move the pen to (10,10). Draw a line to (90,10). Line to (90,90). Close the path.” {Đọc to: “Di bút tới (10,10). Vẽ line tới (90,10). Line tới (90,90). Đóng path.”} That is a right-angled triangle. {Đó là một tam giác vuông.}

The golden rule of capitalization: {Quy tắc vàng về viết hoa:}

Uppercase = absolute coordinates (from the origin). Lowercase = relative coordinates (from where the pen is now). {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 jumps to the point (50,50). m 50 50 jumps 50 right and 50 down from here. {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.} Every command below has both forms. {Mọi lệnh dưới đây đều có cả hai dạng.}

M and L — move and line {M và L — di và kẻ}

• M x y — moveto: lift the pen and place it, drawing nothing. Every path must start with one. {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.}
• L x y — lineto: draw a straight line to a point. {vẽ đường thẳng tới một điểm.}
• H x / V y — shortcuts for horizontal / vertical lines (one number each). {tắt cho line ngang / dọc (mỗi cái một số).}
• Z — closepath: draw a straight line back to the last M. {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 — the cubic Bézier (the one you’ll use most) {C — Bézier bậc ba (cái con dùng nhiều nhất)}

A straight line is boring. Curves need control points — magnets that pull the line without sitting on it. {Đườ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" />

• The curve starts at the M anchor (10,80) and ends at (95,80). {Đường cong bắt đầu ở anchor M (10,80) và kết thúc ở (95,80).}
• 40 10 is the control point for the start; 65 10 is the control point for the end. {40 10 là control point cho điểm đầu; 65 10 cho điểm cuối.}
• The curve leaves the start heading toward its control point, and arrives at the end coming from its control point. {Đườ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ó.}

That tangent rule is the whole intuition. {Quy tắc tiếp tuyến đó là toàn bộ trực giác.} In the demo, the dashed blue lines are those tangents — drag a blue point and watch the curve follow. {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.}

To chain smooth curves, use S (smooth cubic): it reflects the previous control point automatically so joins don’t kink. {Để 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 and T — the quadratic Bézier (cheaper) {Q và T — Bézier bậc hai (rẻ hơn)}

A quadratic curve shares one control point between both ends. {Đườ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) -->

Less control, fewer numbers — great for simple arcs and fonts. {Ít điều khiển, ít số hơn — tốt cho cung đơn giản và font.} T continues a quadratic smoothly, like S does for cubics. {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 — the elliptical arc (the scary one) {A — cung elip (cái đáng sợ)}

The arc command has the most parameters, which is why people fear it. {Lệnh arc có nhiều tham số nhất, nên người ta sợ nó.} It is just precise: {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 -->

• rx ry — the radii of the ellipse the arc is cut from. {bán kính của elip mà cung được cắt ra.}
• x-axis-rotation — tilt the ellipse in degrees. {nghiêng elip theo độ.}
• large-arc-flag (0/1) — take the small arc or the big one. {lấy cung nhỏ hay cung lớn.}
• sweep-flag (0/1) — curve clockwise or counter-clockwise. {cong theo chiều kim đồng hồ hay ngược.}

Between two points and a given ellipse there are four possible arcs; those two flags pick which one. {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.} Flip them in the builder and watch the arc jump. {Lật chúng trong trình dựng và xem cung nhảy.} Arcs power pie charts, gauges, and rounded connectors. {Arc tạo nên biểu đồ tròn, đồng hồ đo, và đường nối bo góc.}

Why senior devs rarely hand-write paths {Vì sao senior hiếm khi viết path bằng tay}

You almost never type d by hand for complex art — you draw it in Figma/Illustrator and export. {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.} But you must read it fluently to: {Nhưng con phải đọc nó trôi chảy để:} debug a broken icon, tweak a control point by hand, write the line-drawing animations in Part 6, and generate paths from data in Part 9. {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.}

The master’s warnings {Lời cảnh báo của sư phụ}

• Always start with M. A path with no moveto draws nothing. {Luôn bắt đầu bằng M. Path không có moveto thì không vẽ gì.}
• Case matters. A stray lowercase l turns absolute into relative and scatters your shape. {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.}
• Commas are optional, spaces are not always. M10 10 is fine; M1010 is one number. Be tidy: M 10 10. {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.}

Practice, or it didn’t happen {Luyện tập, không thì coi như chưa học}

1. Rebuild a triangle three ways {Dựng lại tam giác ba cách}: with <polygon>, with L commands, and with H/V where possible. {bằng <polygon>, bằng lệnh L, và bằng H/V khi có thể.}
2. Draw a smile {Vẽ nụ cười}: a single Q curve, then drag its control point in the demo to make it frown. {một đường Q, rồi kéo control point trong demo để thành mặt mếu.}
3. Make a pie slice {Làm một miếng bánh}: M to centre, L to the rim, A along the rim, Z back. {M về tâm, L ra vành, A chạy theo vành, Z quay về.}

What’s next {Phần tiếp theo}

Now you can describe any outline. {Giờ con tả được mọi đường viền.} But an outline with no paint is invisible. {Nhưng đường viền không sơn thì vô hình.} In Part 3 we make things beautiful: fill and fill rules, the full stroke family (stroke-width, linecap, linejoin, dasharray), then linear and radial gradients and tiling patterns — the paint box of SVG. {Ở 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.}