Chuyển PNG, JPG Sang SVG Miễn Phí: Ra Path Thật, Không Phải Ảnh Bọc Trong SVG

Một ảnh PNG hay JPG chỉ thành SVG thật khi được trace – điểm ảnh được thay bằng các hình tô màu (path) – còn rất nhiều công cụ “chuyển PNG sang SVG” bỏ qua bước đó và chỉ nhét nguyên ảnh bitmap vào trong file SVG. Kiểm tra mất 30 giây: mở file .svg bằng trình soạn thảo văn bản, nếu thấy <image cùng một chuỗi base64 rất dài thì đó là ảnh bị bọc, còn nếu thấy các dòng <path d= thì đó là SVG được trace thật. Tracepen trace thật: thả ảnh PNG hoặc JPG vào trình duyệt, bấm Download, chọn SVG. Dùng miễn phí với tài khoản 3dshouse miễn phí (có hạn mức xuất file miễn phí mỗi ngày; trace và xem trước không bị tính) – chuyển ảnh sang SVG online, hoặc đọc trang đầy đủ về Tracepen Online để biết từng tùy chọn.

Tracepen xử lý được ảnh màu thuộc bất kỳ loại nào, và chính xác trên ảnh đồ họa phẳng màu như logo, icon và các vùng màu phẳng. Nó không phải công cụ trace một màu (loại cắt ngưỡng đen/trắng biến ảnh nhiều màu thành một hình bóng duy nhất), và cũng không phải công cụ vector hóa bằng AI (loại này vẽ lại bức ảnh nên kết quả không chính xác so với bản gốc). Kết quả là tất định: cùng một ảnh, cùng thiết lập thì ra cùng một file SVG, nên tháng sau bạn tái tạo lại được đúng file đó.

Hai kiểu công cụ “chuyển PNG sang SVG”: trace và bọc ảnh

PNG hay JPG là một lưới điểm ảnh có màu. SVG là văn bản mô tả các hình. Từ cái này sang cái kia có hai cách, và cả hai đều được bán dưới cùng một cái tên:

• Bọc ảnh giữ nguyên điểm ảnh. Công cụ ghi ra một file SVG chỉ chứa một phần tử <image> trỏ tới ảnh PNG của bạn, thường ở dạng văn bản base64. MDN mô tả phần tử này là thứ “đưa ảnh vào bên trong tài liệu SVG” và “có thể hiển thị file ảnh raster”. File có đuôi .svg nhưng không có gì bên trong là vector.
• Trace bỏ điểm ảnh đi và ghi đường viền của các vùng màu thành path, mỗi path có một màu tô. Đây là cách duy nhất cho ra thứ bạn đổi màu, cắt, hay phóng to được.

Các công cụ tự nói gì về mình, đọc trên chính trang của họ ngày 28/10/2026 (phần trích được dịch từ tiếng Anh):

Người dùng gặp loại ảnh bị bọc rất thường xuyên. Một chuyên gia trên Adobe Community trả lời người có file SVG nặng hơn file JPG: “JPEG bị nhúng vào SVG, nên file đương nhiên lớn hơn” (chủ đề). Trên Doom9, một người trả lời bạn hỏi về việc phóng to SVG: “SVG của bạn chỉ có cái PNG nhúng bên trong. Nó chưa chuyển đổi gì cả” (chủ đề). Trong một chủ đề của VisualNEO, người hỏi nhận ra “dung lượng file svg gần như y hệt dung lượng dữ liệu mã hóa base64” (chủ đề).

Phân biệt trong 30 giây: mở file SVG bằng trình soạn thảo văn bản

Bấm chuột phải vào file .svg, mở bằng Notepad hoặc trình soạn thảo văn bản bất kỳ (đừng mở bằng trình duyệt, vì nó chỉ vẽ ra), rồi so sánh:

Trung tâm trợ giúp của Cricut cũng nói rõ file PNG hay JPG thường nhận được gì: file raster “được tải lên thành một layer duy nhất”, không phải mỗi màu một layer (How to upload images into Design Space). Câu từ chối ở trên nằm ở trang unsupported items của Cricut.

SVG thật từ Tracepen chứa những gì

Mở bất kỳ file SVG của Tracepen bằng trình soạn thảo văn bản, toàn bộ file chỉ gồm:

• Một thẻ gốc <svg> có viewBox và width / height, đều tính bằng pixel của ảnh đã trace. MDN: khi có viewBox, “một phép biến đổi kéo giãn hoặc đổi cỡ vùng nhìn SVG cho vừa phần tử chứa nó” – nên cùng một file có thể rộng 16 px trên thanh công cụ hay rộng một mét trên banner. Ảnh có cạnh dài hơn 1500 px được thu nhỏ trước, và file nằm trong hệ pixel đó.
• Mỗi layer màu một thẻ <path>, có màu fill phẳng dạng hex. Dữ liệu path chỉ dùng đoạn thẳng và đường cong (lệnh M, L, C và Z, ba chữ số thập phân).
• Lỗ là lỗ thật. Mọi path đều có fill-rule="evenodd", nên phần trong của chữ “O” hay số “8” là trong suốt, không phải một mảng trắng đè lên.
• Một nét viền mảnh cùng màu với màu tô (stroke-width="1" trừ khi bạn đặt Line thickness). Nó ngăn các đường kẻ hở li ti giữa hai màu kề nhau ở những trình xem vẽ từng hình riêng.
• Không có <image>, không có chữ, không có gradient, không có script. Chữ thành đường viền chứ không còn là chữ sửa được, và gradient thành các bậc màu phẳng.

Một dòng rút gọn từ file thật (logo bốn màu trên nền trắng, lưu dạng JPG, trace ngày 28/10/2026):

<path d="M189.120 277.500 C 189.597 273.650,191.614 265.424,193.601 259.220 C 195.923 251.974,199.055 244.918,202.358 239.493 ... L 72.000 166.000 Z " fill="#2b9c4a" stroke="#2b9c4a" stroke-width="1" stroke-linejoin="round" fill-rule="evenodd"/>

Các layer được ghi theo thứ tự diện tích lớn nhất trước, nên thẻ <path> đầu tiên thường là nền. Điều này quan trọng cho dung lượng file và độ trong suốt, xem hai phần bên dưới.

Chuyển PNG, JPG sang SVG bằng Tracepen, từng bước

1. Mở app và đăng nhập bằng tài khoản 3dshouse miễn phí (nút đăng nhập mở một tab trình duyệt; xong thì quay lại).
2. Thả ảnh PNG hoặc JPG vào (WebP, GIF và BMP cũng được, tối đa 50 MB và 250 triệu điểm ảnh). App tự trace. Cạnh dài hơn 1500 px sẽ được thu về 1500 px.
3. Nhìn vào Color Layers. Mỗi màu một ô, kèm dòng tóm tắt dạng “N faces / M layers”. So M với số màu bạn biết ảnh có.
4. Chỉnh rồi bấm Convert. Color number bắt đầu bằng số màu tìm được và chỉ kéo xuống được. Merge min area (1-64 px, mặc định 4) hòa các đốm nhỏ vào màu xung quanh; Noise filter (Off, 1-5) làm mịn JPG bị nén; Corner smooth (0-100%, mặc định 80%) giữ góc nhọn ở 0% và bo tròn ở 100%. Convert không bị tính lượt, chạy lại bao nhiêu lần cũng được.
5. Bỏ tick ô màu nền nếu SVG cần trong suốt hoặc file cần nhẹ (hai phần tiếp theo).
6. Bấm Download, chọn SVG. File lấy tên theo ảnh của bạn (logo.png thành logo.svg). Mỗi lần tải tính là một lượt xuất trong hạn mức miễn phí mỗi ngày.
7. Mở file .svg bằng trình soạn thảo văn bản một lần: thấy các dòng <path mà không có <image là bạn đã có đúng thứ cần.

Mở Tracepen Online (miễn phí) →

Dung lượng file: cái gì quyết định (đã đo)

SVG được trace không tự động nhẹ hơn ảnh PNG, và số màu không phải thứ làm nó nặng. Hai ảnh thử, trace với thiết lập mặc định ngày 28/10/2026 (con số của bạn sẽ khác, điều đáng chú ý là quy luật):

• Layer nền là phần nặng nhất của cả hai file. Đường viền của nó chạy dọc mép bức ảnh từng pixel một (path bắt đầu bằng M 0.000 0.000 L 1.000 0.000 L 2.000 0.000 ...), và riêng path đó chiếm 44 trong 50 KB của logo và 189 trong 299 KB của ảnh chữ. Nếu không cần nền, hãy bỏ tick trước khi tải.
• Merge min area là núm chỉnh dung lượng mạnh nhất. Ở 1 px file chữ nặng gấp hơn ba lần, vì mỗi đốm của ảnh gốc thành một hình; từ 16 trở lên thì không giảm thêm. Logo sạch gần như không đổi (51 KB ở mức 1, 50 KB từ mức 4 trở lên).
• Số màu hầu như không làm đổi dung lượng (47 KB ở 2 màu, 50 KB ở 5 màu). Dung lượng theo số điểm dọc các cạnh, không theo số màu.
• Bộ đếm N faces là cảnh báo sớm: hàng nghìn face nghĩa là file nặng trong Illustrator, Cricut hay trình duyệt. Hãy tăng Merge min area hoặc giảm Color number trước khi tải.

Nên chọn bao nhiêu màu

Với ảnh đồ họa phẳng: số màu thật của nó cộng một cho nền. Số Tracepen đề xuất thường đúng là con số đó, và bạn chỉ kéo xuống được từ đó. Kéo xuống là gộp các màu gần nhau nhất: hữu ích khi gộp hai sắc xanh gần giống thành một, có hại nếu gộp hai màu vốn phải khác nhau. Ở mức 1, phần tối của bức ảnh ra thành một hình duy nhất, đường nhanh nhất tới một hình stencil một màu.

Logo thử ở trên có chút đổ bóng trong từng múi; kết quả ra năm màu tô phẳng (bốn màu cộng màu trắng), đó là dáng vẻ của một gradient sau khi trace. Nếu việc cần làm là đúng màu thương hiệu, làm theo các bước trong bài chuyển logo sang vector, nơi mỗi ô màu được gõ lại đúng mã hex thương hiệu. Ở cả hai file thử, ô màu nền ra lệch trắng tinh một chút (#fffffe và #fefefe), nên nếu giữ nền trắng, hãy đặt lại ô màu thành màu bạn muốn thay vì tin vào nó.

Độ trong suốt: nền là một layer

JPG không có độ trong suốt, còn các điểm ảnh trong suốt của PNG được đặt lên một nền đặc trước khi trace: màu trắng, hoặc màu đen nếu chính bức ảnh có chứa trắng tinh. Dù thế nào thì nền cũng thành một layer, thấy được trong Color Layers. Bỏ tick nó thì nó không có trong SVG, nên file thực sự trong suốt. Logo trắng trên PNG nền trong suốt sẽ hiện thành layer trắng nằm trên layer đen; bỏ tick layer đen là bạn giữ lại đúng các hình trắng.

SVG đi đâu: Cricut, Silhouette, web, Figma

Lỗi làm hỏng việc chuyển PNG sang SVG

• Tin vào đuôi file. Đổi tên logo.png thành logo.svg, hay “lưu thành” SVG trong công cụ chỉ nhúng ảnh, cho ra file mở được nhưng không làm được việc nào của vector. Hãy chạy phép thử bằng trình soạn thảo văn bản.
• Trace JPG nhiễu hạt với Merge min area ở mức 1. Mỗi đốm thành một hình và file phình gấp nhiều lần (992 KB so với 299 KB trong bài thử chữ). Giữ từ 4 trở lên, và thêm chút Noise filter cho JPG bị nén.
• Để nguyên nền. Đó là layer nặng nhất và nó đặt một cái hộp màu sau hình của bạn. Bỏ tick nó.
• Mong chữ vẫn là chữ. Sau khi trace, chữ là đường viền. Nếu biết font, hãy gõ lại chữ trong phần mềm thiết kế và chỉ giữ bản trace cho phần biểu tượng.
• Mong gradient vẫn mượt. Mỗi layer là một màu phẳng, nên gradient thành các bậc. Hãy dựng lại gradient trong phần mềm thiết kế, đặt lên hình đã trace.
• Bắt đầu từ ảnh quá nhỏ hoặc ảnh chụp màn hình còn khung. Bản trace chỉ chính xác bằng điểm ảnh nó nhận được. Cắt bỏ khung trình duyệt trước (Crop) và dùng bản lớn nhất bạn có.

Các cách chuyển PNG sang SVG miễn phí, so sánh

Muốn so sánh tương tự trên một bức ảnh chụp, xem so sánh công cụ chuyển ảnh sang vector.

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

Vì sao file SVG của tôi nặng hơn file JPG vừa chuyển?

Nhiều khả năng công cụ đã nhúng ảnh JPG vào trong SVG: văn bản base64 lớn hơn ảnh nó mã hóa khoảng một phần ba. Hãy mở SVG bằng trình soạn thảo văn bản; có thẻ <image cùng data:image nghĩa là chưa trace gì cả. SVG được trace đúng cách vẫn có thể nặng nếu giữ layer nền hoặc các đốm nhỏ thành hình: hãy bỏ tick nền và tăng Merge min area.

SVG phóng to cỡ nào cũng không giảm chất lượng được không?

SVG được trace co giãn tự do: nó chứa đường viền và viewBox, nên cạnh sắc ở mọi kích thước, dù độ chi tiết chỉ bằng ảnh PNG được trace. SVG “chuyển đổi” mà chỉ bọc PNG thì giữ nguyên điểm ảnh gốc và bị vỡ hạt khi phóng to.

Làm sao biết công cụ chuyển PNG sang SVG có vector hóa thật không?

Mở file .svg vừa tải bằng trình soạn thảo văn bản. Các dòng <path d= có tọa độ nghĩa là đã trace; một thẻ <image với chuỗi base64 dài, và file lớn hơn PNG gốc khoảng một phần ba, nghĩa là chỉ mới bọc ảnh.