PNG và SVG khác nhau thế nào? Khi nào nên dùng định dạng nào?

1. Khác biệt cốt lõi: lưới điểm ảnh và đường toán học

PNG là bitmap: nó cắt hình thành từng điểm ảnh và ghi lại màu của từng điểm. Phóng to PNG thực chất là kéo giãn các điểm ảnh nên sẽ xuất hiện răng cưa và mờ. SVG là ảnh vector: nó mô tả hình bằng các lệnh toán học như toạ độ và đường cong Bézier, và trình duyệt vẽ lại hình ở kích thước mới, nên rõ nét ở mọi mức thu phóng. Đó là nguồn gốc của hầu như mọi khác biệt giữa hai định dạng.

Về độ trong suốt, PNG hỗ trợ kênh alpha nên có thể lưu nền trong suốt. SVG vốn đã trong suốt — chỉ cần không vẽ hình chữ nhật nền thì phần ngoài hình vẽ đều trong suốt. Tiện thể nhắc, JPG không hỗ trợ trong suốt, nền trắng của nó là màu thật được vẽ vào.

2. Dung lượng file và tốc độ tải

Với các hình đơn giản như biểu tượng và logo, file SVG thường chỉ vài KB và một bộ file dùng được cho mọi mật độ màn hình. PNG thì thường phải chuẩn bị cả bản @2x, @3x để vẫn sắc trên màn hình Retina, dung lượng vì thế tăng gấp bội. Nhưng với ảnh chụp thì ngược lại: dải màu chuyển tiếp cực kỳ phong phú, cưỡng ép vector hóa sẽ sinh ra rất nhiều đường, file SVG lại lớn hơn JPG/WEBP nhiều, không đáng công.

Xét về nguyên lý nén, PNG dùng nén không mất dữ liệu để ghi điểm ảnh nên hình càng phức tạp file càng lớn; SVG là văn bản thuần, các lệnh đường và toạ độ lặp lại rất dễ nén. Đó là lý do hai định dạng đều được xem là không mất dữ liệu lại cho ra dung lượng rất khác nhau.

Tình huống	Định dạng nên dùng	Lý do
Biểu tượng / logo website	SVG	Một bộ file dùng cho mọi độ phân giải, CSS đổi màu được
Ảnh chụp	JPG / WEBP	Nhỏ gọn, giữ được độ chân thực của ảnh
Ảnh chụp màn hình	PNG	Chính xác từng điểm ảnh, nén không mất dữ liệu
Biểu đồ dữ liệu	SVG	Rõ nét khi co giãn, dễ lập trình tương tác
Ảnh đại diện mạng xã hội	PNG / JPG	Phần lớn nền tảng chỉ nhận bitmap

3. Khi nào nên dùng PNG

• Ảnh chụp, hiệu ứng đổ sáng phức tạp và dải chuyển màu tinh tế;
• Ảnh chụp màn hình và ảnh giao diện cần độ chính xác từng điểm ảnh;
• Nơi nền tảng chỉ nhận bitmap, ví dụ tải ảnh đại diện trên một số trang quản trị;
• Làm phương án dự phòng tương thích khi môi trường quá cũ không hỗ trợ SVG.

4. Khi nào nên dùng SVG

• Biểu tượng và logo website: một bộ file dùng cho mọi độ phân giải, trên màn hình Retina vẫn sắc nét;
• Hình cần đổi màu bằng CSS/JavaScript hoặc làm hiệu ứng vẽ nét;
• Biểu đồ dữ liệu: các thư viện trực quan hóa như ECharts mặc định xuất SVG;
• In ấn, khắc laser, khắc chữ: thiết bị đọc đường vector.

5. PNG và SVG có chuyển đổi qua lại được không?

Được. PNG sang SVG: dùng công cụ PNG sang SVG của PolySVG hoặc công cụ chuyển ảnh sang SVG, tải lên rồi bấm tạo để vector hóa — với biểu tượng và logo kết quả rất tốt, còn ảnh chụp sẽ mang phong cách minh họa. Việc chuyển đổi miễn phí và PNG nền trong suốt vẫn giữ nguyên nền. File SVG sau khi chuyển vẫn có thể mở trong trình chỉnh sửa để đổi màu, xóa nền, tạo thành quy trình hoàn chỉnh. SVG sang PNG: mở file trong trình chỉnh sửa SVG trực tuyến rồi xuất PNG ở độ phân giải bạn muốn, rất tiện để chèn vào tài liệu hoặc làm ảnh xem trước.

Cần lưu ý rằng PNG sang SVG không đơn thuần là lưu sang định dạng khác mà là quá trình vector hóa vẽ lại đường viền: tài nguyên đồ họa cho ra các đường sạch, còn ảnh chụp bị gom thành khối màu. Nên xem trước kết quả trong công cụ và xác nhận phong cách đúng ý rồi mới tải về dùng.

Một câu quyết định: biểu tượng, logo, biểu đồ chọn SVG; ảnh chụp, ảnh chụp màn hình chọn PNG/JPG/WEBP. Khi phân vân, nội dung đồ họa nên ưu tiên SVG. Muốn tìm hiểu sâu hơn, hãy đọc SVG là gì và Ba cách chuyển ảnh sang SVG.