Cách vector hóa một biểu tượng
Đọc 6 phút · Xuất bản 2 thg 8, 2026 · Cập nhật 7 thg 10, 2026
Một biểu tượng sống cùng lúc ở mọi kích thước. Cùng một tệp là một mục 16 pixel trong menu, một nút 24 pixel, một ô ứng dụng 512 pixel và, thỉnh thoảng, một tấm áp phích. Chỉ làm được khi hình học bên dưới trung thực: ít nút, đường dẫn khép kín, và không sót viền nhiễu từ khử răng cưa của thứ raster bạn bắt đầu.
Vector hóa một biểu tượng vì thế ít nói về bản chuyển đổi, mà nhiều về thứ bạn đưa vào và thứ bạn tỉa sau đó. Hướng dẫn này phủ cả hai.
Bắt đầu từ bản raster lớn nhất bạn có, rồi ép phẳng nó
Khử răng cưa là kẻ thù ở đây. Trên một biểu tượng 32 pixel, các pixel xám mềm dọc mọi đường chéo chiếm một phần lớn ảnh, và bộ truy vết không có cách biết chúng vốn là cạnh cứng chứ không phải một tông trung gian thật. Đưa cho nó bản 512 pixel, cùng cạnh ấy thành chuyển tiếp một pixel trên bốn mươi chín pixel sạch — hình khối không thể lẫn.
Nếu biểu tượng đơn sắc, hãy làm nó đơn sắc thật sự trước khi chuyển đổi: đen tinh trên nền trong suốt, hoặc đen tinh trên trắng, không bóng đổ, không quầng sáng bên trong. Mỗi hiệu ứng trong số đó thành hình khối trong đầu ra, mà hình khối trong đầu ra là nút bạn phải lần ra và xóa.
Đánh giá kết quả bằng số nút, không bằng cảm giác ở 100%
Ở kích thước bạn đang nhìn, gần như lượt truy vết nào trông cũng ổn. Thử thách đáng kể là số nút: mở đường dẫn ra và đếm điểm. Một biểu tượng vẽ tay khéo chỉ có điểm nơi đường cong thật sự đổi hướng — một hình vuông bo có tám, một hình tròn có bốn, một hình chevron có ba hoặc sáu. Một hình đơn giản quay về với sáu mươi điểm nghĩa là bộ truy vết đuổi theo nhiễu pixel, và hình ấy sẽ render chậm, chỉnh khó và trông lệch nhẹ khi phóng.
Từ Lite trở lên, điều khiển độ chi tiết chính là thứ cai trị trực tiếp: độ chi tiết thấp gom mạnh hơn và cho ít nút hơn, sạch hơn. Hạ xuống tới khi góc vừa bắt đầu mềm, rồi lùi lại một nấc. Trên Trial mức này chọn tự động, và cách tác động đến nó là chất lượng nguồn.
Canh lưới pixel sau đó, không phải trước
Bộ biểu tượng có lưới — thường 24×24 với lề an toàn hai pixel, hoặc 16×16 cho giao diện dày đặc. Một đường dẫn được truy vết nằm ngay đâu pixel từng nằm — gần lưới đó chứ không nằm trên nó, và ở kích thước render nhỏ, chữ «gần» chính là thứ khiến một biểu tượng trong hàng trông nặng nửa pixel hơn hàng xóm.
Bắt các đường dẫn xong về tọa độ nguyên trong trình chỉnh sửa và đặt viewBox của SVG theo lưới của bạn. Lần đầu cầu kỳ, sau đó là cơ học, và đó là ranh giới giữa một bộ biểu tượng trông như được thiết kế và một bộ trông như được chuyển đổi.
Một độ nét, một phong cách, một tệp
Nếu bạn dựng lại cả một bộ, hãy chuyển đổi tất cả trong một lô để chúng qua đúng cùng thiết lập, rồi chuẩn hóa độ dày nét bằng tay xuyên suốt bộ. Một họ biểu tượng đọc là một họ vì nét của chúng khớp; một bộ truy vết rời rạc qua mấy buổi làm sẽ không khớp, và sự lệch đó nhìn thấy ngay cả khi không biểu tượng nào đứng riêng trông sai.
Chuyển đổi hàng loạt bắt đầu từ Pro, nhận 30 tệp mỗi lượt. Dưới mức đó tệp chuyển từng cái một, với bộ hai mươi cái là vài phút bấm chuột chứ không phải vật cản.
Từng bước một
- 01
Lấy bản raster lớn nhất
512 pixel trở lên nếu còn tồn tại. Nguồn 32 pixel phần lớn là khử răng cưa, và khử răng cưa là thứ bộ truy vết làm sai.
- 02
Ép về một màu
Bỏ bóng đổ, quầng trong và gradient trước khi chuyển đổi. Mỗi cái thành thêm hình khối trong đầu ra.
- 03
Chuyển sang SVG
Tải lên và tải kết quả về. SVG là định dạng gốc cho cả biểu tượng web lẫn ứng dụng.
- 04
Kiểm tra số nút
Mở đường dẫn trong trình chỉnh sửa. Một hình đơn giản phải có vài điểm, không phải vài chục. Nếu có vài chục, nguồn đã mang nhiễu.
- 05
Canh theo lưới biểu tượng
Canh đường dẫn về tọa độ nguyên và đặt viewBox theo kích thước lưới, để biểu tượng render sắc ở 16 và 24 pixel.
Lỗi thường gặp
- Biểu tượng mờ ở 16 pixel dù đã là vector
- Đường dẫn của nó chưa canh lưới pixel, nên bộ render khử răng cưa mọi cạnh. Bắt tọa độ về số nguyên và đặt viewBox khớp lưới.
- Một hình đơn giản quay về với hàng chục nút
- Nguồn có khử răng cưa hay nhiễu JPEG mà bộ truy vết đọc là chi tiết. Dùng nguồn lớn hơn, sạch hơn; từ Lite trở lên, hạ độ chi tiết.
- Góc vốn phải sắc lại bị tròn
- Độ làm mượt đặt quá cao. Từ Lite trở lên, hạ một nấc — góc thật giữ sắc tới mức Mạnh, chỉ Tối đa tròn mọi thứ.
- Biểu tượng có viền mờ màu khác
- Đó là viền khử răng cưa của bản gốc, bị truy vết thành một hình mảnh riêng. Xóa nó trong trình chỉnh sửa, và lần sau ép nguồn về một màu cứng trước.
Câu hỏi thường gặp
- Biểu tượng nguồn nên to cỡ nào?
- Cỡ lớn nhất còn tồn tại — 512 pixel trở lên là thoải mái. Dưới chừng 64 pixel, khử răng cưa chiếm phần lớn ảnh và bộ truy vết không phân biệt nổi cạnh mềm với cạnh thật — chính là thứ đẻ ra đường cong lắc lư.
- Tôi chuyển cả một bộ biểu tượng một lúc được không?
- Chuyển đổi hàng loạt bắt đầu từ Pro, nhận 30 tệp mỗi lượt; Studio nhận 50 và Agency 100. Chuyển một bộ trong một lô quan trọng hơn cả tốc độ — mọi tệp qua đúng cùng thiết lập, nên các biểu tượng ra nhất quán với nhau.
- Độ trong suốt sống sót không?
- Có, từ nguồn có nó. Vùng trong suốt của PNG hay WebP giữ nguyên trống trong SVG. JPEG không có độ trong suốt, nên biểu tượng từ JPEG đến kèm nền của nó thành một hình đặc bạn có thể xóa.
- Biểu tượng nên là SVG hay phông chữ?
- SVG. Phông biểu tượng là giải pháp tạm cho một thời trình duyệt đã kết thúc: không làm được nhiều màu, vỡ khi thiếu tệp phông, và trình đọc màn hình đọc chúng như văn bản. Chuyển sang SVG và dùng trực tiếp hoặc làm sprite.
Hướng dẫn liên quan
- Cách vector hóa một logo — Xây lại một logo chỉ còn bản JPG nhỏ thành đường cong sạch, sẵn sàng in, với đúng màu thương hiệu.
- Cách vector hóa bản vẽ kiến trúc và bản vẽ kỹ thuật — Chuyển bản vẽ và sơ đồ đã quét thành nét tuyến chỉnh sửa được mà không kế thừa sai số của máy quét.
- Cách vector hóa tờ rơi hay áp phích cho khổ lớn — Cứu một thiết kế phẳng cho A1 trở lên mà không bị mép mềm — và biết phần nào đừng chuyển đổi.