Cách chuyển PNG sang SVG: vector hóa logo, icon và nét vẽ

PNG là ảnh raster: một lưới pixel cố định, mỗi pixel có một màu và có thể có giá trị độ trong suốt. Logo 500 × 500 px chứa đúng 250.000 ô vuông như vậy và không có gì khác, nên khi phóng to lên cỡ poster, mỗi ô chỉ có thể to ra hoặc bị nhòe ở các khoảng giữa. SVG là ảnh vector, một tệp văn bản liệt kê các hình như <path>, <circle> và <rect> cùng tọa độ và màu tô. Trình duyệt hoặc máy cắt sẽ vẽ lại các hình đó ở bất kỳ kích thước nào cần thiết, vì vậy logo vector vẫn sắc nét trên màn hình điện thoại lẫn trên banner hội chợ.

Đi từ vector sang raster rất dễ vì bộ kết xuất chỉ cần vẽ các hình thành pixel; SVG sang PNG làm đúng việc đó trong một giây. Chiều ngược lại không có đường tắt nào không mất dữ liệu, vì lưới pixel không lưu lại các hình đã tạo ra nó. Phải có thứ gì đó nhìn vào pixel và đoán mỗi hình bắt đầu và kết thúc ở đâu. Bước đoán đó gọi là trace hay vector hóa, và mọi công cụ chuyển PNG sang SVG trung thực, từ Illustrator đến chương trình dòng lệnh, thực chất đều là công cụ trace.

Một số công cụ bỏ qua phần khó. Chúng ghi ra tệp SVG hợp lệ chứa một phần tử <image> với PNG gốc nhúng dưới dạng văn bản base64, khiến tệp nặng hơn PNG khoảng một phần ba. Kết quả mở được như SVG và qua được bước kiểm tra loại tệp, nhưng vẫn là ảnh pixel trong vỏ vector: phóng to sẽ thấy cùng những cạnh răng cưa, và máy cắt không tìm thấy đường path nào để chạy theo. Hãy mở SVG bất kỳ bằng trình soạn thảo văn bản và tìm data:image/png; nếu có chuỗi này thì chưa có gì được vector hóa.

Trace phù hợp với những ảnh vốn được vẽ bằng các hình khối. Logo xuất từ ứng dụng thiết kế, biểu tượng phẳng, hoạt hình có viền đen, chữ ký quét hoặc khuôn stencil đều gồm một vài màu đặc phân tách bằng cạnh rõ. Công cụ trace gom mỗi màu thành các vùng, bám theo đường biên và khớp các đường cong mượt, nên SVG cuối cùng gần với hình mà nhà thiết kế đã vẽ. Chữ đậm trong logo chữ cũng trace tốt, vì chữ lớn chỉ là một hình tô khác, và mỗi ký tự trở thành đường viền bạn có thể đổi màu hoặc đổi kích thước nhưng không gõ lại được nữa.

Ảnh chụp thì ngược lại. Ảnh chân dung hay ảnh sản phẩm có hàng nghìn sắc độ khác nhau tinh tế hòa vào nhau, và định dạng vector không có cách hiệu quả để mô tả điều đó. Yêu cầu 16 màu, bạn được một hình minh họa posterize với các dải màu lộ rõ; yêu cầu 64 màu, bạn được hàng chục nghìn hình nhỏ trong tệp lớn hơn nhiều so với PNG mà vẫn không giống ảnh chụp. Chuyển màu mềm, bóng đổ và hiệu ứng phát sáng cũng thành các chồng dải mỏng theo cách tương tự. Chữ nhỏ là điểm gây rắc rối thứ ba: ở cỡ 10–12 px, khử răng cưa hòa mỗi chữ vào nền, và công cụ trace không phân biệt được chữ "e" với "o".

Độ phân giải quan trọng hơn bất kỳ cài đặt nào. Công cụ trace khớp mỗi đường cong với các bậc thang pixel dọc theo cạnh, bậc thang càng mịn thì đường cong càng chuẩn. Nếu tự xuất PNG từ Figma, Canva, Photoshop hoặc bản trình chiếu, hãy xuất lại ở kích thước gấp hai hoặc ba lần kích thước hiển thị; logo rộng 1500–2000 px cho công cụ trace nhiều dữ liệu để làm việc. Đừng phóng to PNG nhỏ bằng công cụ AI trước, trừ khi kết quả trông sạch ở mức zoom 100 %, vì kết cấu cạnh do AI tạo ra cũng được trace trung thành như cạnh thật.

Tiếp theo, hãy làm nền thật đơn giản. PNG hỗ trợ trong suốt hoàn toàn, và nền trong suốt là trường hợp dễ nhất: mọi pixel trong suốt hoàn toàn được coi là khoảng trống, nên SVG không có khung trắng phía sau hình. Nếu PNG có nền đặc, hãy cắt sát quanh hình trước; hướng dẫn cách cắt ảnh theo tỉ lệ của chúng tôi nói rõ về việc lấy khung chính xác. Nền rối, như logo chụp trên áo thun, nên được xóa hoặc tô đè bằng một màu phẳng trước khi trace.

Cuối cùng, hãy giảm số màu trước khi để công cụ trace làm việc đó. Ẩn bóng đổ, hiệu ứng phát sáng và lớp phủ chuyển màu trong tệp gốc, và thay màu chuyển bằng màu giữa của nó nếu bản vector không cần. Đếm các màu đặc còn lại, gồm cả màu viền, rồi ghi con số xuống; đó là con số hữu ích nhất bạn sẽ nhập ở bước tiếp theo. Nếu phải chọn giữa JPEG và PNG của cùng một logo, hãy chọn PNG, vì nén JPEG tạo nhiễu quanh mọi cạnh, như giải thích trong JPG, JPEG và PNG khác nhau thế nào.

Mọi công cụ trace đều hỏi cùng ba câu, dù nhãn khác nhau. Câu đầu là giữ lại bao nhiêu màu. Trong công cụ chuyển PNG sang SVG, Chế độ màu cho chọn giữa Màu, Thang độ xám và Đen trắng, còn Số màu đặt số cụm mà pixel được phân loại vào, từ 2 đến 64. Hãy đặt bằng con số bạn đã ghi. Đặt quá cao khiến công cụ tách các pixel cạnh đã khử răng cưa thành những màu mỏng riêng, hiện ra như quầng mờ quanh mỗi hình; đặt quá thấp thì hai màu thương hiệu bị gộp làm một.

Câu thứ hai là xử lý cạnh thế nào. Làm mượt bo tròn các bậc thang do pixel để lại, còn Độ chi tiết quyết định một đốm nhỏ cỡ nào vẫn được thành hình. Trang PNG bắt đầu ở Độ chi tiết 70 và Làm mượt 40, giữ được các góc nhỏ khi bản xuất sạch. Hãy giảm Độ chi tiết nếu xuất hiện bụi và chấm lạc, tăng Làm mượt nếu đường cong bị gợn, và đặt Đường cong thành Đường thẳng cho logo hình học có cạnh thẳng, hoặc Cạnh pixel cho pixel art muốn giữ dạng khối.

Câu thứ ba chỉ áp dụng cho trace đen trắng: vạch ranh giới giữa mực và giấy ở đâu. Ngưỡng chạy từ 1 đến 254, mặc định là 128. Pixel tối hơn ngưỡng thành đen, sáng hơn thì thành trống. Với chữ ký bằng bút bi xanh nét mảnh, hãy tăng lên khoảng 160–180 để các nét nhạt còn lại; với tranh bút lông đậm trên giấy hơi xám, hãy giảm xuống khoảng 100 để vân giấy không biến thành đốm. Hãy đổi từng cài đặt một rồi so sánh, vì các cài đặt tác động lẫn nhau.

Đừng chỉ nhìn ảnh thu nhỏ. Hãy mở SVG trong trình duyệt và phóng to 400–800 % ở đường cong khít nhất, như phần bụng chữ hoặc đầu nhọn. Bản trace tốt có cung mượt và góc sắc ở nơi thiết kế có góc; bản yếu có chỗ gợn, lõm và đầu nhọn bị bo tròn. Sau đó xem tệp trong trình chỉnh sửa vector như Inkscape, Illustrator hoặc Figma và bật chế độ outline hoặc xem node. Logo hai màu đơn giản thường cần vài trăm node; nếu của bạn có vài nghìn, công cụ trace đã bám theo nhiễu và các path sẽ rất khó chỉnh sửa hoặc cắt.

Dung lượng tệp là cách kiểm tra nhanh. SVG đã tối ưu của logo phẳng thường từ vài KB đến vài chục KB, thường nhỏ hơn PNG gốc. Tệp trace lớn gấp nhiều lần PNG nguồn thường nghĩa là quá nhiều màu, quá nhiều chi tiết, hoặc là ảnh chụp lẽ ra không nên trace. Hãy giữ Tối ưu SVG luôn bật, vì nó làm tròn tọa độ và gộp path mà không thay đổi hiển thị, và cuối cùng hãy phóng hình lên cỡ poster rồi thu xuống cỡ favicon để xác nhận nó đọc rõ ở cả hai.

Lựa chọn miễn phí trên máy tính là Inkscape. Nhập PNG, chọn nó và mở Path > Trace Bitmap (Shift+Alt+B). Các chế độ quét một lần như Brightness cutoff tạo một path đen, phù hợp với tranh nét; các chế độ quét nhiều lần trace một số màu hoặc mức xám nhất định thành các lớp xếp chồng. Trace đen trắng của Inkscape dựa trên Potrace, thư viện trace do Peter Selinger phát hành năm 2001. Bản thân Potrace là chương trình dòng lệnh đọc PBM, PGM, PPM hoặc BMP chứ không đọc PNG, chỉ xử lý ảnh hai tông và ghi ra SVG, PDF, EPS hoặc DXF, nên phù hợp để viết script xử lý hàng loạt bản quét.

Trong Adobe Illustrator, Image Trace thay thế Live Trace cũ từ Illustrator CS6. Đặt PNG vào, mở Window > Image Trace và bắt đầu từ preset như Black and White Logo, 3 Colors hoặc 16 Colors, rồi chỉnh Paths, Corners và Noise ở phần nâng cao. Bản trace vẫn ở trạng thái trực tiếp cho đến khi bạn bấm Expand, biến nó thành các path thông thường chỉnh sửa được. Nếu chưa cài chương trình nào trong hai chương trình trên, công cụ chuyển đổi trên trình duyệt chạy cùng quy trình giảm màu, tìm cạnh, khớp đường cong; công cụ chuyển ảnh sang SVG còn nhận JPG, WebP và HEIC và có thể ghi EPS, PDF hoặc DXF thay cho SVG.

Trên web, SVG là khuyến nghị của W3C từ năm 2001 và mọi trình duyệt hiện nay đều hiển thị nó trong thẻ <img>, làm nền CSS hoặc nhúng trực tiếp trong HTML, nơi màu thậm chí có thể đổi khi rê chuột. Logo đã trace thường thay thế nhiều kích cỡ PNG cho màn hình retina bằng một tệp nhỏ. Với máy cắt, SVG là định dạng Cricut Design Space và Silhouette Studio yêu cầu: mỗi hình được trace thành một đường cắt, và bản trace nhiều màu đến dưới dạng các lớp riêng để cắt từ các màu decal khác nhau. Máy cắt laser và phần mềm CNC thường ưu tiên DXF, mà PNG sang DXF tạo ra từ cùng cài đặt trace.

Xưởng in yêu cầu tệp vector vì máy in, người số hóa thêu hoặc máy cắt decal cần cạnh chứ không cần pixel, và SVG đã trace thường đáp ứng được cho sticker, áo thun hay banner. Nhưng đó vẫn chỉ là xấp xỉ: đường cong là phỏng đoán được khớp, màu được lấy trung bình từ pixel, và chữ được chuyển thành đường viền. Vì vậy trước khi trace logo công ty, hãy hỏi người làm ra nó. Nhà thiết kế hoặc agency hầu như luôn có tệp AI, EPS, PDF hoặc SVG gốc với đường cong chính xác, màu có tên và font, và gửi chỉ mất một phút. Trace là công cụ đúng khi bản gốc đã mất, khi logo chỉ còn trên giấy tiêu đề đã quét, hoặc khi hình là bản vẽ của chính bạn.