Chuyển biểu tượng PNG thành SVG cho bộ UI nhất quán

Đừng chuyển cả thư mục trong một lượt. Bắt đầu với nhóm nhỏ gồm biểu tượng đơn giản nhất, biểu tượng nhiều chi tiết nhất, một hình cong và biểu tượng có phần khoét. Xác định các quy tắc SVG bằng nhóm mẫu đó, rồi áp dụng cho phần còn lại. Cách này phát hiện quyết định đồ lại không tốt trước khi chúng lan ra hàng chục tệp.

Bản thân chuyển đổi chỉ là một bước. Bộ UI dùng được còn cần hệ tọa độ chung, kích thước thị giác nhất quán, cách xử lý màu dễ dự đoán, đường dẫn chỉnh sửa được và kiểm tra khi đưa vào sản phẩm sẽ dùng biểu tượng.

Quy trình ngắn gọn

1. Kiểm kê bộ PNG và tìm bản trùng hoặc nguồn thiếu.
2. Chọn biểu tượng đại diện, xác định lưới chung, khoảng đệm, mô hình tô màu hoặc nét viền và quy tắc màu.
3. Chuyển các biểu tượng mẫu thành đường dẫn thật.
4. Kiểm tra hình bóng, nút, khoảng trống và vùng màu.
5. Chuẩn hóa bộ trong một trình chỉnh sửa vector, rồi chuyển đổi và kiểm tra các biểu tượng còn lại.
6. Thử SVG đã xuất trong UI và quy trình xử lý tài nguyên thực tế.

Quyết định biểu tượng PNG nào nên thành SVG

Biểu tượng phẳng có ranh giới rõ rất phù hợp để đồ lại. Các ảnh khác cần cách khác. Phân loại thư mục trước khi mở công cụ chuyển đổi.

Nếu nguồn còn lại là định dạng chứa biểu tượng thay vì PNG, khôi phục qua quy trình ICO thành SVG hoặc ICNS thành SVG tương ứng trước. Sau đó chuẩn hóa hình kết quả theo cùng quy tắc bộ UI bên dưới.

Tên tệp SVG không chứng minh pixel đã thành đường dẫn vector. Định dạng cho phép chứa ảnh raster nhúng qua phần tử <image>, như đặc tả nội dung nhúng SVG giải thích. Nếu tệp xuất vẫn được chọn như một ảnh chữ nhật hoặc thành ô vuông khi phóng lớn, dùng các bước kiểm tra raster nhúng trước khi thêm vào bộ.

Đặt quy tắc bộ UI trước khi đồ lại

Thư mục gồm các biểu tượng riêng lẻ sạch vẫn có thể trông thiếu nhất quán khi đặt cạnh nhau. Viết quy tắc của bộ trước, ngay cả khi PNG gốc chưa tuân theo.

Chọn một không gian tọa độ

Dùng một viewBox cho các biểu tượng cần cùng kích thước thành phần. Các số không nhất thiết là 24 × 24 hay 16 × 16; chúng cần khớp hệ thống của bạn. SVG ánh xạ hình chữ nhật viewBox vào vùng hiển thị, nên kích thước ngoài giống nhau chỉ hữu ích khi hình được đặt nhất quán bên trong. Đặc tả hệ tọa độ SVG 2 định nghĩa ánh xạ đó.

Ghi lại:

• viewBox chung;
• tâm thị giác và đường cơ sở mong muốn;
• khoảng đệm bên trong tối thiểu;
• phần nào được chủ ý vượt giới hạn thị giác thông thường.

Chọn mô hình tô màu hoặc nét viền

Quyết định cả nhóm được dựng từ hình bóng có màu tô, nét viền còn chỉnh sửa được hay sự kết hợp có ghi rõ. Bộ đường viền cần đầu nét, góc nối và độ đậm nhìn thấy nhất quán. Bộ hình tô cần khoảng trống và cách xử lý mép nhất quán. Đồ lại có thể biến nét mảnh thành đường viền khép kín, nên kiểm tra hình học thay vì chỉ dựa vào bản xem trước.

Quyết định cách kiểm soát màu

Với hệ thống một màu, dùng quy tắc màu lặp lại được mà ứng dụng đích ánh xạ vào token biểu tượng. Với biểu tượng nhiều màu, xác định bảng màu cho phép và vùng nào có thể đổi. Đừng giữ các màu gần trùng nhỏ do khử răng cưa để lại nếu chúng không có mục đích nhìn thấy.

Chuyển nhóm mẫu đại diện trước

Chọn bốn đến sáu biểu tượng bộc lộ các trường hợp khó. Gồm đường tròn hoặc cung, đường chéo, khoảng rỗng hoặc lỗ nhỏ và biểu tượng dày chi tiết nhất trong nhóm. Nếu bộ có nhiều màu, thêm một biểu tượng như vậy.

1. Chuẩn bị PNG

Dùng bản xuất sạch nhất có sẵn. Xóa hình chữ nhật nền ngoài ý muốn, cắt xén nhất quán và tránh phóng nguồn nhỏ mờ chỉ để tạo thêm pixel. Hướng dẫn chuẩn bị nguồn để chuyển PNG thành SVG không mất chất lượng đề cập các chi tiết dành riêng cho đồ lại.

Giữ bản sao nguyên trạng của mọi ảnh gốc. Dễ đánh giá việc dọn hơn khi bạn so sánh SVG với nguồn thay vì dựa vào trí nhớ.

2. Đồ lại biểu tượng mẫu

Dùng công cụ vector hóa tự động hoặc công cụ đồ lại trong phần mềm thiết kế. Quy trình Image Trace hiện hành của Illustrator có điều khiển màu, đường dẫn, góc và nhiễu. Tính năng Vectorize hiện hành của Figma cung cấp chế độ màu sau khi đồ lại và lưu ý ảnh phức tạp hoặc độ phân giải thấp có thể không vector hóa tốt (Adobe Image Trace; Figma Vectorize).

Với cách làm trên trình duyệt, tải mẫu lên công cụ PNG thành SVG của PerfectVector. So sánh bản xem trước với ảnh gốc, kiểm tra hình và vùng màu, rồi tải SVG bạn muốn chuẩn hóa trong trình chỉnh sửa vector. Chạy nhóm đại diện trước khi xử lý phần còn lại của thư mục.

Nếu Figma là trình chỉnh sửa gốc của bộ, quy trình Figma Vectorize so với SVG bên ngoài giúp so sánh cả hai cách trên cùng mẫu. Đánh giá các hình sau khi nhập, gồm lỗ và vùng màu bạn cần chỉnh.

3. Kiểm tra đường dẫn, không chỉ bản xem trước

Mở mỗi kết quả trong trình chỉnh sửa vector và chọn các hình. Đường dẫn SVG được dựng từ lệnh và tọa độ, gồm đoạn thẳng và đường cong được định nghĩa trong đặc tả đường dẫn SVG 2. Bạn cần đủ nút để giữ hình bóng, không có con số mục tiêu chung cho mọi hình.

Tìm:

• chuỗi nút dày đặc quanh đường cong đơn giản;
• đốm thừa hoặc hình chữ nhật nền;
• các bản sao chồng lên cùng một mép;
• mảnh màu nhỏ do khử răng cưa;
• lỗ hoặc khoảng rỗng trong chữ bị đóng khi đồ lại;
• một hình chữ nhật raster thay vì đường dẫn chọn được.

Nếu hình đơn giản bị vùi trong điểm, dùng chẩn đoán quá nhiều nút trước khi giản lược. Dọn quá mạnh có thể di chuyển góc và đóng khoảng nhỏ, nên so sánh đường dẫn đã chỉnh với PNG.

Chuẩn hóa biểu tượng thành một nhóm đồng bộ

Khi cấu trúc các kết quả đồ lại mẫu đã tốt, đặt chúng trên lưới chung và kiểm tra cùng nhau. Đây là bước biến một bộ hình thành hệ thống.

Kiểm tra cả bộ biểu tượng

Kiểm tra bộ ở kích thước giao diện thực tế và mức phóng lớn để chỉnh sửa:

Được phép hiệu chỉnh thị giác. Đường tròn có thể cần vượt nhẹ khỏi khung chứa hình vuông để cả hai trông cùng kích thước. Quy tắc là cảm nhận nhất quán dựa trên lưới có tài liệu, thay vì ép mọi hình vào giới hạn hình học giống hệt. Quy trình thẻ lịch trực quan có thể in áp dụng sự phân biệt này cho ô hình, nhãn riêng và trang PDF có kích thước đo rõ.

Với bộ hình hoạt động thường ngày cần chỉnh mảng hình trước khi bố trí thẻ, dùng công cụ chuyển hình hỗ trợ trực quan trên một hình đại diện. Giữ nhãn riêng và kiểm tra hình đã chuyển vẫn mang ý nghĩa mong muốn.

Áp dụng với PerfectVector

PerfectVector phù hợp ở bước đồ lại giữa chuẩn bị nguồn và chuẩn hóa bộ. Dùng công cụ để dựng lại nhóm PNG đại diện thành các hình vector chỉnh sửa được, rồi đánh giá đầu ra theo tiêu chí quan trọng với bộ này:

1. Mỗi biểu tượng có giữ hình bóng và khoảng trống không?
2. Bạn có chọn và đổi màu các vùng mong muốn được không?
3. Đường cong có dùng số nút dễ quản lý không?
4. Kết quả có dễ chuẩn hóa hơn kết quả đồ lại thủ công hoặc tích hợp trong ứng dụng không?

Nếu mẫu đạt, chuyển các PNG phù hợp còn lại và đưa vào cùng tệp gốc để kiểm tra cả bộ biểu tượng. Nếu không đạt, đổi nguồn hoặc cách đồ lại trước khi xử lý thêm. PerfectVector không thay thế quyết định căn chỉnh thị giác và đặt tên thuộc hệ thống thiết kế.

Dọn mà không mất nguồn

Giữ hai tầng tệp:

• Kho nguồn: PNG nguyên trạng, mọi tệp thiết kế gốc và ghi chú về nguồn gốc.
• Bản gốc chỉnh sửa được: các biểu tượng vector chuẩn hóa trên lưới chung.
• Bản xuất để giao: SVG tối ưu mà sản phẩm sử dụng.

Chỉnh hình trong bản gốc, rồi tạo lại tệp giao. Tránh chỉnh tay các bản xuất riêng vì các bản sửa sẽ lệch nhau. Nếu SVG cần đổi màu, đổi hình hoặc sửa canvas, dùng quy trình chỉnh SVG và đưa hình học đã sửa trở lại bộ gốc.

Khi giao dưới dạng biểu tượng web tái sử dụng, làm theo quy trình SVG symbol sprite sau khi hình được duyệt. Quy trình kiểm tra ID symbol, tham chiếu lồng nhau, giới hạn tọa độ, quy tắc tô vẽ và tên từng thể hiện trước khi đưa bộ vào ứng dụng. Nếu giao diện vẽ biểu tượng trên canvas, ánh xạ đường dẫn SVG vào canvas bằng Path2D và đối chiếu phép biến đổi tọa độ, màu, khoảng mở và độ phân giải bề mặt vẽ với SVG gốc.

Khi Penpot là nơi lưu thư viện thiết kế, chèn SVG mẫu vào canvas và thử một vùng màu, một đường viền trước khi thêm phần còn lại. Hướng dẫn nhập SVG vào Penpot phân biệt nhập tệp dự án với chèn hình và giải thích cách kiểm tra hình gốc của ứng dụng, nội dung SVG thô và nhãn chỉnh sửa được. Cách này phát hiện biểu tượng trông đúng nhưng không hỗ trợ các chỉnh sửa bộ cần.

Trước khi giao, thử vài biểu tượng trong mọi môi trường quan trọng: thư viện thiết kế, thành phần ứng dụng và mọi bước build hoặc tối ưu. Kiểm tra trạng thái vô hiệu hóa và màu đảo nếu hệ thống dùng. Tệp sạch về cấu trúc vẫn có thể không phù hợp bộ nếu giả định về màu hoặc kích thước không khớp thành phần. Nếu đích là Android, dùng danh sách kiểm tra nhập PNG thành VectorDrawable để xác minh kích thước vùng hiển thị, màu tô, độ phức tạp đường dẫn và khả năng hỗ trợ nhập trước khi đưa tài nguyên vào ứng dụng. Với dự án Godot, dùng danh sách kiểm tra nhập SVG vào Godot để chọn kiểu nhập texture và xác minh kích thước raster, lấy mẫu vượt mức (oversampling) và hình được hỗ trợ. Với dự án Unity, dùng danh sách kiểm tra nhập SVG vào Unity để chọn công cụ nhập tương thích trình chỉnh sửa và xác minh đầu ra UI Toolkit hoặc sprite.

Với dự án SwiftUI, kiểm tra quy trình danh mục tài nguyên SVG và kết xuất để xác nhận tài nguyên ảnh có tên, cách xử lý màu gốc hoặc template và kích thước hiển thị cuối.

Danh sách kiểm tra giao bộ UI

• Mọi biểu tượng đồ lại đều dùng nguồn sạch nhất có sẵn.
• Biểu tượng cùng tuân theo quy tắc viewBox, khoảng đệm và căn chỉnh đã ghi rõ.
• Kích thước thị giác và độ đậm nhìn thấy nhất quán ở kích thước UI thực.
• Biểu tượng tô màu và nét viền theo mô hình hệ thống đã nêu.
• Vùng màu ánh xạ dễ dự đoán vào bảng màu hoặc quy tắc token đã duyệt.
• Đường cong dùng đủ nút để trung thực mà không có đường dẫn rối rõ rệt.
• Không SVG nào chứa raster nhúng, khung nền hoặc mép trùng ngoài ý muốn.
• Tên tệp và thành phần duy nhất, ổn định.
• Bộ xuất đã được thử sau bước tối ưu thông thường của sản phẩm.
• Kho nguồn, bản gốc chỉnh sửa được và tệp giao được giữ riêng.

Câu hỏi thường gặp

Có thể chuyển hàng loạt mọi biểu tượng PNG trước khi dọn không? Có thể, nhưng nhóm mẫu đại diện an toàn hơn. Chuyển vài biểu tượng bao quát các hình khó nhất của bộ, xác lập lưới và quy tắc đường dẫn, rồi mới xử lý phần còn lại. Nếu không, một lựa chọn đồ lại sai có thể tạo việc dọn lặp lại trên cả thư mục.

Mọi biểu tượng SVG có nên dùng cùng viewBox không? Biểu tượng dùng chung một thành phần UI thường có lợi từ cùng viewBox, nhưng hình bên trong có thể cần hiệu chỉnh thị giác. Giữ không gian tọa độ nhất quán, đồng thời cho phép hình tròn, hình nhọn hoặc biểu tượng đặc biệt dày dùng phần vượt hoặc thay đổi khoảng đệm có ghi rõ.

Biểu tượng UI nên có bao nhiêu nút? Không có con số chung. Dùng ít nút nhất vẫn giữ hình bóng, góc và khoảng trống mong muốn. So sánh biểu tượng có độ phức tạp tương tự và kiểm tra mọi đường cong đơn giản chứa chuỗi điểm dày đặc.

Có nên giữ biểu tượng PNG sau khi hoàn thành bộ SVG không? Có. Giữ PNG gốc và mọi nguồn thiết kế trước đó trong kho lưu trữ. Chúng cung cấp nguồn gốc và tham chiếu trực quan khi cần đồ lại. Dùng bản gốc vector đã chuẩn hóa để chỉnh và tạo SVG giao từ bản gốc đó.

Nguồn tham khảo

1. W3C — Hệ tọa độ, phép biến đổi và đơn vị SVG — định nghĩa vùng hiển thị SVG, hệ tọa độ, viewBox và cách hình được ánh xạ vào vùng hiển thị.
2. W3C — Đường dẫn SVG — định nghĩa lệnh đường thẳng và đường cong tạo nên hình học đường dẫn SVG chỉnh sửa được.
3. W3C — Nội dung nhúng SVG — xác nhận SVG có thể chứa nội dung ảnh raster thay vì đường dẫn vector.
4. Adobe Illustrator — Vector hóa ảnh bằng Image Trace — mô tả quy trình đồ lại raster hiện hành và đầu ra đường dẫn chỉnh sửa được.
5. Figma Learn — Chuyển ảnh tĩnh thành lớp vector — mô tả quy trình Vectorize hiện hành của Figma, chế độ màu và giới hạn ảnh nguồn.

---

Bắt đầu bằng vài biểu tượng khó nhất, không phải cả thư mục. Chuyển PNG mẫu thành SVG, kiểm tra đường dẫn và vùng màu, rồi chuẩn hóa kết quả được chọn theo quy tắc bộ UI trước khi mở rộng quy trình.