Chuyển PNG thành SVG không mất chất lượng

Đồ lại PNG thành SVG là dựng lại pixel thành các hình. Việc này có thể giúp hình dựng lại đổi kích thước và chỉnh sửa được, nhưng không bảo đảm bản sao chính xác hay khôi phục chi tiết không có trong nguồn. Với logo, biểu tượng hoặc minh họa phẳng, hãy so sánh đường bao, màu và chi tiết nhỏ trước khi quyết định SVG đã sẵn sàng. Với ảnh chụp, giữ raster thường tốt hơn trừ khi bạn muốn kết quả cách điệu.

Bạn cần PNG tốt nhất hiện có, mục đích sử dụng rõ ràng và trình chỉnh sửa hoặc ứng dụng sản xuất hỗ trợ SVG để kiểm tra cuối cùng. Giữ PNG gốc và một bản xuất SVG chưa chỉnh sửa để có thể hoàn tác việc làm sạch làm thay đổi thiết kế.

Trước hết, vì sao PNG và SVG là hai loại tệp khác nhau?

PNG là ảnh raster: một lưới các mẫu pixel. Ảnh trông ổn ở kích thước dự kiến, nhưng phóng đủ lớn sẽ lộ lưới: mép mềm đi hoặc lộ ô vuông. Nén PNG không mất dữ liệu, nhưng ảnh được lưu vẫn có kích thước pixel hữu hạn. Xem đặc tả PNG 3 của W3C.

SVG có thể lưu hình học vector như đường dẫn, đường cong và màu tô. Các phần tử vector đó đổi kích thước mà không vỡ hạt raster, dù SVG cũng có thể chứa ảnh raster nhúng hoặc hiệu ứng có giới hạn riêng. (W3C SVG 2; nội dung nhúng trong SVG) Để hiểu đầy đủ, xem Vector hóa hình ảnh là gì?.

Vì vậy, “chuyển PNG thành SVG” nghĩa là dựng lại ảnh pixel thành các hình chỉnh sửa được. Chất lượng kết quả hoàn toàn phụ thuộc vào mức độ thành công của quá trình dựng lại đó.

“Không mất chất lượng” thực sự nghĩa là gì?

Chuyển PNG thành SVG chất lượng cao không chỉ có nghĩa là “mở được trong Illustrator”. Kiểm tra bốn thuộc tính của bản vector được dựng lại:

• Đường dẫn sạch: Đường cong mượt bám theo hình vẽ, không bám lưới pixel.
• Không có điểm neo thừa: Dùng đủ điểm để giữ hình, nhưng đừng nhiều đến mức chỉnh sửa thủ công trở nên khó khăn. Adobe cũng khuyên dùng ít điểm hơn để dễ chỉnh sửa và hiển thị mượt hơn. (Hướng dẫn chỉnh đường dẫn của Adobe; vì sao số nút quan trọng)
• Màu chính xác: Vùng màu phẳng vẫn phẳng, không vỡ thành hàng chục hình có màu gần như giống nhau.
• Cấu trúc dùng được: Có thể chọn và điều chỉnh đúng các phần mong muốn mà không có mảnh thừa hoặc hình học trùng lặp ngoài ý muốn. Một số thiết kế dùng nhóm hoặc đường dẫn phức hợp là hoàn toàn hợp lý.

Công cụ đồ tự động khác nhau rất nhiều. Các cài đặt chi tiết, nhiễu, độ khớp đường dẫn, góc và màu có thể đánh đổi độ trung thực lấy độ phức tạp; Adobe cung cấp trực tiếp các điều khiển đó trong Image Trace. Xem các tùy chọn Image Trace của Adobe. Về kỹ thuật, một tệp có thể là vector nhưng vẫn bất tiện khi chỉnh sửa hoặc cắt, nên hãy kiểm tra đường dẫn thay vì đánh giá qua đuôi .svg. Nếu SVG sẽ dùng cho máy cắt, hãy chuẩn bị tệp để cắt laser và xác minh đường chạy dao trước.

So sánh độ phức tạp đường dẫn

Cách chuyển PNG thành SVG không mất chất lượng

Một quy trình là dùng công cụ vector hóa tự động, sau đó kiểm tra cách dựng lại đường bao, vị trí điểm neo, màu và lớp. Đây là quy trình đó với PerfectVector:

1. Chọn và kiểm tra nguồn. Ưu tiên hình gốc thay vì ảnh chụp màn hình. Kiểm tra khoảng rỗng trong chữ, nét mảnh, độ trong suốt và chi tiết nhỏ nhất ở kích thước bạn định dùng.
2. Tải PNG lên và đồ lại. Mở công cụ chuyển PNG thành SVG. Nếu bước chuẩn bị tải lên đổi kích thước hoặc nén ảnh, hãy kiểm tra ảnh đã chuẩn bị trước khi tiếp tục; thay đổi ở đó có thể ảnh hưởng bản đồ lại. Thông tin sản phẩm phân biệt các bước chuẩn bị, chuyển đổi, xem trước và mở khóa.
3. So sánh bản xem trước miễn phí với nguồn. Kiểm tra hình bóng, khoảng trống có chủ đích, chữ và màu nhìn thấy. Xem trước không cho phép chỉnh màu.
4. Mở khóa kết quả trước khi chỉnh sửa. Một tín dụng mở khóa một kết quả. Sau đó dùng trình chỉnh sửa để đổi màu vùng hoặc gộp các màu gần trùng. Kiểm tra lại sau mỗi thay đổi: bảng màu nhỏ hơn có thể xóa sự khác biệt có chủ đích, và đổi màu không gộp hình học cắt chồng lấp.
5. Xuất bản làm việc dưới dạng SVG. Giữ một bản sao trước khi làm sạch thêm.
6. Mở trong ứng dụng đích. Xác minh kích thước, hình, màu tô, nét viền và cấu trúc đối tượng. Khi sản xuất, thử ở kích thước đầu ra thực tế. Chỉ bản xem trước sắc nét trong trình duyệt không chứng minh ứng dụng khác sẽ nhập đúng mọi tính năng.

Kiểm tra chất lượng thực tế

So sánh các đặc điểm sau ở kích thước dự kiến và khi phóng lớn:

• Hình bóng bên ngoài có bám theo hình gốc không?
• Lỗ trong chữ và khoảng trống nhỏ có chủ đích còn mở không?
• Đường cong có mượt mà không làm tròn các góc cần giữ sắc không?
• Màu có giữ vai trò trực quan sau mỗi lần gộp bảng màu không?
• Bạn có thể chọn đúng các hình mong muốn thay vì chỉ một ảnh nhúng không?

Nếu khoảng rỗng trong chữ biến mất, khôi phục bản trước rồi giữ thêm chi tiết hoặc vẽ lại phần đó. Nếu xuất hiện mảnh thừa, kiểm tra nhiễu ở nguồn và chỉ xóa các phần ngoài ý muốn. Nếu ứng dụng đích làm hình hiển thị khác đi, khoanh vùng tính năng không được hỗ trợ thay vì lập tức đồ lại toàn bộ thiết kế. Hướng dẫn SVG trông vỡ hạt giúp phân biệt pixel nhúng với vấn đề chất lượng đường dẫn.

Chuyển cả thư mục biểu tượng giao diện phát sinh vấn đề chất lượng thứ hai: các tệp phải phối hợp như cùng một bộ. Dùng quy trình chuyển biểu tượng PNG thành SVG cho bộ giao diện để thống nhất lưới, kích thước thị giác, quy tắc màu và kiểm tra bàn giao sau khi các bản đồ lại đại diện đạt yêu cầu.

Mẹo chuyên môn để có kết quả sắc nét nhất

• Hình phẳng phù hợp hơn ảnh chụp. Logo, biểu tượng và minh họa phẳng là những ứng viên hữu ích. Hãy kiểm tra bản đồ lại; ảnh chụp nhiều chi tiết cần kỳ vọng khác về độ trung thực.
• Kiểm tra tương phản cẩn thận. Chỉ cải thiện bản nhạt màu nếu vẫn giữ đúng chi tiết mong muốn.
• Ưu tiên nguồn tốt nhất hiện có. PNG lớn và nét hơn có thể cung cấp nhiều thông tin mép hơn ảnh thu nhỏ, nhưng thêm pixel không khôi phục được chi tiết đã mờ hoặc bị xóa.
• Giản lược màu sau, không phải trước. Đồ lại trước, mở khóa, rồi so sánh từng lần gộp bảng màu với bản gốc.

So sánh quy trình đồ lại theo quyền kiểm soát và độ trung thực

Biết rõ các lựa chọn giúp bạn quyết định. So sánh hữu ích là mức kiểm soát mỗi quy trình cung cấp và những gì bạn phải xác minh, thay vì một bảng xếp hạng chung cho mọi trường hợp:

Vẽ lại thủ công cho quyền kiểm soát trực tiếp nhất, nhưng thời gian phụ thuộc vào hình và người thực hiện. Công cụ tự động có thể nhanh hơn, song chất lượng đầu ra cũng thay đổi theo ảnh và cài đặt. Adobe mô tả chi tiết điều khiển Image Trace, còn Inkscape mô tả quy trình dùng ngưỡng và quét nhiều lượt. (Quy trình Image Trace của Adobe; hướng dẫn đồ lại của Inkscape) Bạn đang cân nhắc các sản phẩm? Xem so sánh công cụ vector hóa ảnh AI.

Khi nào bạn không nên chuyển PNG thành SVG?

Vector hóa hiệu quả với đồ họa có hình dạng rõ ràng: logo, biểu tượng, minh họa, hình nét và chữ. Nó gặp khó với ảnh chụp. Ảnh chụp chứa chi tiết sắc độ liên tục; xấp xỉ bằng các hình có thể làm tệp phức tạp hơn hoặc tạo diện mạo giản lược, phân mảng màu kiểu áp phích.

Quy tắc dễ nhớ: nếu ảnh có mép rõ và bảng màu hạn chế, hãy vector hóa. Nếu là ảnh chụp, giữ raster hoặc chấp nhận kết quả cách điệu thay vì trung thực.

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

Chuyển PNG thành SVG có giảm chất lượng không? Thay đổi định dạng chứa không tự động cải thiện hay giảm chất lượng. SVG đã đồ lại có thể đổi kích thước các đường dẫn được dựng mà không vỡ hạt raster, nhưng độ trung thực phụ thuộc nguồn, phương pháp và cài đặt đồ lại. SVG chỉ nhúng PNG thì chưa hề chuyển pixel thành hình học vector.

Tôi có thể chuyển ảnh chụp từ PNG thành SVG không? Có thể, nhưng thông thường bạn không nên. Ảnh chụp được vector hóa thành tệp rất lớn hoặc phân mảng màu. Vector hóa phù hợp với logo, biểu tượng và minh họa.

Chuyển PNG thành SVG có miễn phí không? Chuyển đổi và xem trước miễn phí; một tín dụng mở khóa kết quả để chỉnh sửa và xuất. So sánh bản xem trước với nguồn trước, rồi mở khóa trước khi dùng trình chỉnh màu. Thử SVG đã xuất trong ứng dụng sẽ sử dụng tệp.

Sau đó dùng gì để mở SVG? Nhiều công cụ hỗ trợ vector, gồm Illustrator, Figma, Inkscape, Affinity Designer và Canva, hỗ trợ quy trình SVG. Mức hỗ trợ bộ lọc, chữ, mặt nạ hoặc nội dung nhúng có thể khác nhau, nên thử tệp trong đúng ứng dụng và phiên bản bạn sẽ dùng.

Nguồn tham khảo

1. W3C — Đặc tả Portable Network Graphics (PNG), ấn bản thứ ba — Tiêu chuẩn PNG hiện hành, gồm biểu diễn hình ảnh không mất dữ liệu và alpha.
2. W3C — Scalable Vector Graphics (SVG) 2 — Tiêu chuẩn định nghĩa hình vector, đường dẫn, tô vẽ và kết xuất SVG.
3. W3C — Nội dung nhúng trong SVG — Đặc tả giải thích vì sao đưa PNG vào SVG không phải vector hóa thành đường dẫn.
4. Adobe Illustrator — Tùy chọn bảng Image Trace — Điều khiển chi tiết, đường dẫn, góc, nhiễu và màu chính thức để đồ lại raster.
5. Adobe Illustrator — Tự động giản lược đường dẫn — Điều khiển giảm điểm neo chính thức và đánh đổi về độ trung thực.
6. Inkscape — Đồ lại hình ảnh — Quy trình chính thức hiện hành để đồ lại bằng một lượt và nhiều lượt quét.
7. PerfectVector — Thông tin sản phẩm — Chuẩn bị tải lên, xem trước miễn phí và quyền truy cập khi mở khóa kết quả.

---

Chuyển PNG và so sánh bản xem trước với đường bao và chi tiết nhỏ của bản gốc. Mở khóa trước khi chỉnh sửa, rồi xác minh SVG đã xuất trong ứng dụng bạn sẽ dùng.