Giao diện

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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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

Cookie

Chúng tôi dùng cookie của Google Analytics để biết trang nào được xem và nơi nào người dùng bị vướng — không quảng cáo, không lập hồ sơ, không bán dữ liệu. Từ chối thì trang vẫn hoạt động y như cũ. Chi tiết trong Chính sách quyền riêng tư.