SVG là gì? Ảnh vector và ảnh raster khác nhau thế nào

Bạn có bao giờ để ý: logo trên các website lớn vẫn sắc nét dù bạn phóng to trình duyệt lên 300%, trong khi một ảnh PNG phóng to vài lần đã nhoè và răng cưa? Bí mật nằm ở định dạng SVG — một loại ảnh vector.

Bài này giải thích ảnh vector và ảnh raster khác nhau thế nào, SVG mạnh ở đâu, và cách chuyển đổi giữa SVG với các định dạng ảnh thông thường.

Ảnh raster và ảnh vector

Ảnh raster (còn gọi là ảnh bitmap) được tạo từ một lưới các điểm ảnh (pixel), mỗi điểm một màu. JPG, PNG, WEBP, AVIF, GIF, HEIC đều là ảnh raster. Ảnh chụp từ điện thoại luôn là raster. Khi phóng to quá kích thước gốc, phần mềm phải "đoán" màu cho các điểm ảnh mới, nên ảnh bị mờ hoặc lộ răng cưa.

Ảnh vector không lưu điểm ảnh mà lưu cách vẽ: một hình tròn tâm ở đâu, bán kính bao nhiêu, màu gì; một đường cong đi qua những điểm nào. Máy tính vẽ lại hình theo công thức ở bất kỳ kích thước nào, nên ảnh luôn sắc nét.

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng ảnh vector chuẩn của web, do tổ chức W3C phát triển. Một file SVG thực chất là văn bản dạng XML — bạn có thể mở bằng trình soạn thảo và đọc được nội dung, ví dụ <circle cx="50" cy="50" r="40" fill="#f97316"/> là một hình tròn màu cam.

Mọi trình duyệt hiện đại đều hiển thị SVG. Các công cụ thiết kế như Figma, Illustrator, Inkscape đều xuất được SVG.

Ưu điểm của SVG

• Phóng to không giới hạn mà không mất nét — một file dùng được cho cả favicon 16 px lẫn biển quảng cáo.
• File rất nhẹ với hình đơn giản như logo, icon, biểu đồ — thường chỉ vài KB.
• Đổi màu, tạo hiệu ứng bằng CSS ngay trên website mà không cần xuất lại ảnh.
• Đọc được bằng máy: chữ trong SVG có thể được công cụ tìm kiếm đọc.

Khi nào không nên dùng SVG?

SVG không phù hợp với ảnh chụp. Một bức ảnh phong cảnh có hàng triệu điểm màu khác nhau; mô tả nó bằng hình học sẽ cho file khổng lồ mà vẫn không giống thật. Ảnh chụp nên dùng JPG, WEBP hoặc AVIF.

Ngoài ra, nhiều nơi không nhận file SVG: Facebook, Zalo, phần lớn cổng nộp hồ sơ và một số phần mềm văn phòng. Khi đó bạn cần xuất SVG ra PNG.

Chuyển đổi giữa SVG và ảnh thường

Từ SVG sang PNG, JPG

Dùng SVG sang PNG nếu bạn có file .svg, hoặc SVG Code to Image nếu bạn chỉ có đoạn mã SVG (ví dụ copy từ Figma hay một thư viện icon). PNG giữ được nền trong suốt; nếu xuất JPG, nền trong suốt sẽ được tô trắng.

Từ ảnh thường sang SVG

Chiều ngược lại khó hơn: máy phải "dò" các vùng màu trong ảnh và vẽ lại bằng đường nét. Công cụ chuyển ảnh sang SVG của Convert.com.vn làm việc này bằng thuật toán dò vector thật (tạo các đường path), không phải nhúng ảnh PNG vào vỏ SVG như nhiều trang khác.

Kết quả tốt nhất với logo, icon, hình vẽ có ít màu và nét rõ. Với ảnh chụp, kết quả sẽ giống tranh vẽ được đơn giản hoá thành các mảng màu — đó là giới hạn tự nhiên của vector chứ không phải lỗi công cụ. Nếu bạn cần đoạn mã để dán vào code, dùng Image to SVG Code.

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

Mở file SVG bằng gì?

Mọi trình duyệt (Chrome, Edge, Firefox, Safari) đều mở được SVG: chỉ cần kéo file vào cửa sổ trình duyệt. Để chỉnh sửa, dùng Figma, Inkscape (miễn phí) hoặc Adobe Illustrator.

File SVG có an toàn không?

SVG là văn bản và có thể chứa mã JavaScript. Ảnh SVG từ nguồn lạ, khi được chèn trực tiếp vào trang web, có thể là rủi ro bảo mật. Vì vậy nhiều nền tảng không cho tải lên SVG. Với file từ nguồn không tin cậy, hãy xuất sang PNG trước khi dùng.

Có dùng SVG làm ảnh đại diện mạng xã hội được không?

Phần lớn mạng xã hội không nhận file SVG. Hãy xuất logo sang PNG kích thước lớn (ví dụ 1000×1000 pixel) rồi tải lên; nền tảng sẽ tự thu nhỏ khi hiển thị.

Tóm lại

Hiểu sự khác nhau giữa vector và raster giúp bạn chọn đúng định dạng ngay từ đầu: hình học thì vector, ảnh chụp thì raster.