SVG vs PNG: Khi Nào Dùng Ảnh Vector, Khi Nào Dùng Ảnh Raster?

SVG và PNG giải quyết hai vấn đề khác nhau hoàn toàn. SVG lưu ảnh dưới dạng hình toán học có thể phóng to vô hạn mà không mờ. PNG lưu ảnh dưới dạng lưới pixel màu. Chọn sai mất hiệu suất hoặc chất lượng hình ảnh.

Điểm khác biệt cốt lõi giữa SVG và PNG

Sự khác biệt giữa SVG và PNG phản ánh sự phân chia lớn hơn: đồ họa vector vs đồ họa raster.

SVG (Scalable Vector Graphics) là định dạng dựa trên XML, mô tả ảnh bằng công thức toán học của hình dạng, đường thẳng, đường cong và màu sắc. Khi bạn phóng to SVG, trình duyệt tính lại và vẽ lại mọi hình ở kích thước mới. Kết quả luôn sắc nét, dù hiển thị ở 16px favicon hay 16.000px biển quảng cáo.

PNG (Portable Network Graphics) là định dạng raster, lưu ảnh dưới dạng lưới pixel, mỗi pixel có giá trị màu cụ thể. Ảnh có độ phân giải cố định. Phóng to quá kích thước gốc và nó trở nên mờ, bị pixel hóa. Thu nhỏ thì bạn tải dung lượng thừa.

Sự phân biệt này quyết định mọi thứ: dung lượng file, khả năng co giãn, quy trình chỉnh sửa, và loại ảnh mà mỗi định dạng xử lý tốt.

Khi nào SVG là lựa chọn tốt hơn

SVG xuất sắc với bất kỳ đồ họa nào ban đầu được tạo dưới dạng vector. Dùng SVG cho:

• Logo — logo cần sắc nét ở mọi kích thước, từ icon 32px trên tab trình duyệt đến banner hero toàn chiều rộng. SVG xử lý với một file duy nhất. Với PNG, bạn cần nhiều phiên bản ở nhiều độ phân giải.
• Icon — icon UI, icon điều hướng, icon mạng xã hội. Ví dụ thực tế: website thương mại điện tử có 50 icon danh mục nặng tổng 1.2 MB dạng PNG, giảm xuống chỉ 95 KB sau khi chuyển sang SVG.
• Minh họa và sơ đồ — sơ đồ kỹ thuật, flowchart, bản đồ, infographic với đường nét rõ ràng và màu phẳng. SVG giữ chữ có thể chọn và tìm kiếm được.
• Animation — phần tử SVG có thể animate bằng CSS hoặc JavaScript, tạo loading spinner nhẹ, micro-interaction, và biểu đồ tương tác mà không cần file video.
• Favicon — trình duyệt hiện đại hỗ trợ favicon SVG, hiển thị sắc nét trên mọi mật độ pixel. Bạn có thể tạo favicon từ bất kỳ ảnh nào với Tạo Favicon.

Theo W3Techs, 65.5% website hiện dùng SVG, là định dạng ảnh phổ biến thứ 3 sau PNG và JPEG. Tỷ lệ sử dụng tăng khoảng 8% mỗi năm, nhờ nhu cầu responsive design và lợi ích hiệu suất.

Khi nào PNG là lựa chọn tốt hơn

PNG phù hợp khi chi tiết cấp pixel quan trọng hoặc nội dung ảnh vốn dĩ là raster:

• Ảnh chụp có trong suốt — ảnh sản phẩm cắt nền, ảnh ghép nhiều lớp. PNG hỗ trợ kênh alpha hoàn chỉnh mà vẫn giữ chi tiết ảnh chụp. (Ảnh không cần trong suốt thì JPEG thường tốt hơn.)
• Screenshot — ảnh chụp màn hình chứa thành phần UI pixel-chính-xác, chữ anti-aliased, và gradient tinh tế vốn là raster. PNG giữ nguyên.
• Artwork phức tạp nhiều màu — tranh số chi tiết, texture, minh họa photorealistic không đơn giản hóa thành hình vector sạch.
• Đồ họa raster có chữ đè — khi cần render pixel-chính-xác của ảnh kết hợp chữ, PNG đảm bảo không có artifact nén quanh mép chữ.

Dung lượng file và hiệu suất

Với loại đồ họa SVG xử lý tốt (icon, logo, minh họa đơn giản), tiết kiệm dung lượng rất đáng kể:

File SVG cũng nén cực tốt với Gzip hoặc Brotli (chuẩn trên hầu hết web server), thường co thêm 50-70% khi truyền tải. SVG 20 KB có thể chỉ truyền 6-8 KB qua mạng.

Lợi ích hiệu suất vượt ra ngoài dung lượng file. SVG có thể nhúng trực tiếp vào HTML, loại bỏ một HTTP request. Chúng render ở độ phân giải gốc của thiết bị mà không cần srcset hay responsive image markup. Và vì chúng dựa trên text, chúng thân thiện với cache và version control.

Với ảnh phức tạp — ảnh chụp, texture chi tiết, ảnh có hàng nghìn màu riêng biệt — SVG không có lợi thế. Ảnh chụp "chuyển" sang SVG hoặc nhúng dữ liệu raster dạng base64 (nặng hơn chứ không nhẹ hơn) hoặc trace thành hình đơn giản (mất chi tiết). Với những ảnh đó, PNG, JPEG, hoặc định dạng mới hơn như WebP và AVIF mới phù hợp.

SVG vs PNG: Bảng so sánh nhanh

Kịch bản thực tế

Giả sử bạn đang thiết kế lại website công ty. Thương hiệu có logo, bộ 30 icon điều hướng và tính năng, ảnh hero, và nhiều screenshot sản phẩm. Đây là cách phân bổ định dạng:

• Logo → SVG. Nó xuất hiện ở header (nhỏ), footer (trung bình), và trang giới thiệu (lớn). Một file SVG xử lý cả ba kích thước, sắc nét trên màn hình retina, và nặng khoảng 5 KB.
• 30 icon → SVG sprite. Tất cả 30 icon trong một file, khoảng 40-60 KB tổng. Ít hơn hai hay ba icon PNG. CSS điều khiển màu và kích thước.
• Ảnh hero → Không phải SVG, không phải PNG. Dùng JPEG hoặc WebP cho file nhỏ nhất ở chất lượng chấp nhận được. Xem bài tối ưu hình ảnh cho website.
• Screenshot sản phẩm → PNG. Screenshot chứa chữ UI và render pixel-chính-xác cần bảo toàn lossless.

Cách chuyển đổi giữa SVG và PNG

Bạn có thể chuyển đổi giữa hai định dạng này trực tiếp trên trình duyệt — không tải lên server, không cần cài phần mềm. Vizua xử lý mọi file ngay trên thiết bị:

• SVG sang PNG — rasterize file SVG ở bất kỳ độ phân giải nào
• Vector hóa ảnh — chuyển ảnh raster (PNG, JPEG) sang SVG
• Tạo Favicon — tạo favicon từ bất kỳ ảnh nào, bao gồm output SVG cho trình duyệt hiện đại

Để tìm hiểu chi tiết hơn về chọn đúng định dạng, bài hướng dẫn kích thước file ảnh liệt kê kích thước và định dạng khuyến nghị theo từng trường hợp sử dụng.

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