SVG (Scalable Vector Graphics, đồ họa vector co giãn được) là định dạng ảnh lưu hình dưới dạng công thức toán học: tọa độ, đường thẳng, đường cong và màu sắc. Kết quả là ảnh SVG không bao giờ vỡ nét dù phóng to đến kích thước bất kỳ, và dung lượng file thường rất nhỏ so với ảnh cùng nội dung định dạng PNG.
SVG là gì
SVG là chuẩn mở do Tổ chức W3C phát triển từ năm 1999, hiện được tất cả trình duyệt phổ biến hỗ trợ đầy đủ (Chrome, Firefox, Safari, Edge). Khác với PNG hay JPG lưu từng điểm màu trong một lưới điểm ảnh, SVG lưu hướng dẫn vẽ: “vẽ một vòng tròn tâm tại tọa độ (40, 40) bán kính 30, viền đen dày 2px, không tô màu bên trong”. Khi hiển thị ở bất kỳ kích thước nào, trình duyệt tính lại từ hướng dẫn đó, nên kết quả luôn sắc nét.
Bên trong, file SVG là văn bản XML có thể mở bằng Notepad. Một icon tìm kiếm đơn giản chỉ vài chục ký tự:
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="11" cy="11" r="8" fill="none" stroke="#14151A" stroke-width="2"/>
<line x1="21" y1="21" x2="16.65" y2="16.65" stroke="#14151A" stroke-width="2"/>
</svg>Khi nhúng code SVG thẳng vào HTML (gọi là inline SVG), bạn có thể điều khiển từng phần tử bên trong bằng CSS và JavaScript, y như điều khiển các phần tử HTML bình thường. Đây chính là sức mạnh phân biệt SVG với mọi định dạng ảnh khác.
SVG khác PNG và JPG ở chỗ nào
PNG và JPG thuộc nhóm ảnh raster (ảnh điểm ảnh): toàn bộ thông tin ảnh là một lưới ô vuông nhỏ, mỗi ô lưu giá trị màu đỏ, xanh lá và xanh dương. Khi bạn phóng to ảnh raster, phần mềm phải kéo giãn các ô này ra, kết quả là ảnh nhòe và vỡ hạt. Không có cách nào phục hồi độ sắc nét đã mất trong file gốc.
SVG không có lưới điểm ảnh. Nó chỉ lưu hướng dẫn. Phóng to bao nhiêu, trình duyệt tính lại từ hướng dẫn đó, kết quả luôn sắc bén ở mọi kích thước.
Thêm vào đó, SVG được đặt vào HTML và tiếp xúc trực tiếp với trình đọc màn hình, nên có thể thêm thẻ <title> và <desc> để hỗ trợ người dùng khiếm thị, điều mà ảnh PNG không làm được một cách trơn tru.
Bảng so sánh SVG, PNG và JPG
| Tiêu chí | SVG | PNG | JPG / WebP |
|---|---|---|---|
| Loại ảnh | Vector | Raster (điểm ảnh) | Raster (điểm ảnh) |
| Phóng to | Không vỡ nét | Vỡ hạt | Vỡ hạt |
| Nền trong suốt | Có | Có | Không (JPG); WebP có thể có |
| Đổi màu bằng CSS | Có (khi nhúng inline) | Không | Không |
| Tốt cho | Logo, icon, sơ đồ | Ảnh cần nền trong suốt | Ảnh chụp thực tế |
| Không tốt cho | Ảnh chụp nhiều chi tiết | Ảnh chụp (nặng hơn JPG) | Nền trong suốt (JPG) |
| Dung lượng (icon đơn giản) | Rất nhỏ, thường dưới 1KB | Nhỏ đến vừa | Không phù hợp cho icon |
| Animation | Có (dùng CSS hoặc SMIL) | Không | Không |
Khi nào dùng SVG, khi nào dùng PNG hay JPG
SVG phù hợp nhất cho logo thương hiệu, hình minh họa có cấu trúc rõ ràng, biểu tượng giao diện, sơ đồ quy trình, biểu đồ dữ liệu. Hình càng đơn giản thì file SVG càng nhỏ và ưu thế càng rõ.
Ngược lại, ảnh chụp thực tế (sản phẩm, nhân vật, phong cảnh) không phù hợp với SVG. Để mô tả đầy đủ màu sắc và chi tiết của một bức ảnh chụp bằng code SVG, file sẽ nặng hơn JPG hay WebP nhiều lần và render chậm hơn đáng kể.
Một số tình huống cụ thể hay gặp:
- Logo website: SVG. Cần sắc nét trên cả điện thoại màn nhỏ lẫn màn hội nghị 4K, và trên banner in.
- Icon trong menu, nút bấm: SVG. Cần đổi màu khi hover hay ở dark mode.
- Banner sản phẩm: JPG hoặc WebP. Ảnh chụp thực, nhiều màu sắc và chi tiết.
- Ảnh thumbnail bài viết: WebP. Cân bằng chất lượng và tốc độ tải.
- Sơ đồ quy trình trong bài viết: SVG hoặc PNG tùy độ phức tạp.
Nếu bạn đang trong giai đoạn lên wireframe hay mockup cho website, chọn đúng định dạng ảnh từ bước này sẽ tránh phải chuyển đổi về sau khi đã đưa vào sản xuất.
Đổi màu SVG bằng CSS như thế nào
Đây là một trong những ưu điểm ít người biết của SVG: màu sắc bên trong có thể thay đổi hoàn toàn bằng CSS mà không cần file ảnh mới. Cùng một icon có thể hiển thị màu khác nhau ở trạng thái mặc định, khi hover và khi bị vô hiệu hóa, chỉ bằng vài dòng CSS.
Có ba cách nhúng SVG vào trang web, và chỉ một trong ba cho phép CSS điều khiển màu sắc bên trong:
Inline SVG (copy code SVG thẳng vào HTML): CSS truy cập được vào từng phần tử bên trong. Đổi màu qua fill hay stroke trong CSS thoải mái. Đây là cách dùng cho icon trong giao diện khi cần thay đổi màu sắc theo trạng thái.
Thẻ <img src="icon.svg">: CSS bên ngoài không vào được bên trong SVG. Ảnh hiển thị đúng nhưng không đổi màu được. Dùng khi chỉ cần hiển thị hình và không cần tương tác màu sắc.
CSS background-image: Tương tự cách trên, không đổi màu được bằng CSS thông thường. Có thể dùng CSS filter để thay đổi màu nhưng cách này phức tạp và ít kiểm soát hơn.
Một thủ thuật hay dùng: trong file SVG, khai báo fill="currentColor" hoặc stroke="currentColor". Khi đó, icon tự lấy màu từ thuộc tính color của phần tử cha trong HTML. Cùng một file SVG có thể lấy màu tự động từ chủ đề màu của từng vùng trên trang mà không cần viết thêm CSS riêng cho icon.
Với media query, bạn cũng có thể đổi màu SVG inline theo dark mode: @media (prefers-color-scheme: dark) { .icon { color: white; } } mà không cần hai file ảnh khác nhau. Nếu bạn chưa quen với loại media query này, bài media query là gì giải thích đầy đủ cú pháp và các loại điều kiện hay dùng.
SVG nhẹ hơn PNG bao nhiêu
Con số cụ thể phụ thuộc vào độ phức tạp của hình, nhưng sự chênh lệch thường đáng kể với icon và logo đơn giản.
Với icon giao diện đơn giản 24px (như icon tìm kiếm hay icon menu hamburger), file SVG thường dưới 1KB trong khi PNG cùng nội dung ở độ phân giải 2x (48px, cần cho màn Retina) vào khoảng 2-4KB. Khi bạn có cả bộ 16-32 icon giao diện, tổng chênh lệch dung lượng là đáng kể.
Một sprite SVG (gộp nhiều icon vào một file duy nhất) cho phép trình duyệt tải một lần rồi dùng lại cho tất cả vị trí trên trang, tương tự sprite PNG nhưng nhẹ hơn và không vỡ nét trên màn độ phân giải cao.
Với logo phức tạp, ưu thế của SVG về dung lượng giảm dần. Logo có nhiều màu chuyển tiếp dày đặc hay chi tiết nhỏ rất nhiều có thể tạo ra file SVG nặng hơn PNG đã nén. Cần so sánh thực tế từng trường hợp cụ thể.
Ngoài dung lượng, SVG còn giúp giảm số lần tải ảnh: thay vì ba file logo (1x, 2x, 3x cho các loại màn khác nhau), chỉ cần một file SVG duy nhất phục vụ tất cả độ phân giải.
Nếu bạn không rành kỹ thuật, cần biết gì về SVG
Bạn không cần tự viết code SVG, nhưng hai điều sau đây ảnh hưởng trực tiếp đến chất lượng website khi bàn giao.
Yêu cầu logo dưới dạng SVG ngay từ đầu: Khi thuê thiết kế logo, yêu cầu nhận file SVG cùng với file PNG. Nếu chỉ nhận PNG, bạn không thể đổi màu logo sau này mà không làm lại, và logo sẽ vỡ nét khi in trên băng rôn hoặc hiển thị trên màn hội nghị lớn.
Kiểm tra website sau khi bàn giao: Logo và icon trên website bàn giao có đang dùng SVG không? Cách kiểm tra: click chuột phải vào logo, chọn “Inspect” hoặc “Xem mã nguồn phần tử”. Nếu code bên trong gồm các thẻ như <svg>, <circle>, <path> thì đang dùng SVG. Nếu thấy <img src="logo.png"> thì đang dùng PNG.
Tối ưu file SVG trước khi đưa lên web: File SVG xuất từ Figma, Illustrator hay Inkscape thường chứa nhiều metadata và code dư không cần thiết, làm nặng file. Qua bước tối ưu bằng công cụ như SVGO (mã nguồn mở, miễn phí) trước khi đưa lên website để giảm dung lượng và làm code gọn hơn.
Câu hỏi thường gặp về SVG
SVG có được hỗ trợ trên mọi trình duyệt không?
Có. Chrome, Firefox, Safari và Edge đều hỗ trợ SVG đầy đủ. Chỉ Internet Explorer 8 trở xuống mới không hỗ trợ, nhưng thực tế không còn dự án nào cần tương thích IE8 từ nhiều năm nay.
Tại sao icon SVG đổi màu được còn logo PNG thì không?
PNG là ảnh điểm ảnh, màu đã ghi cứng vào từng pixel trong file. SVG là code XML, thuộc tính fill và stroke là các giá trị văn bản mà CSS có thể ghi đè. Nhưng điều này chỉ đúng khi SVG được nhúng inline vào HTML, không phải khi dùng thẻ <img> hay CSS background.
Figma xuất SVG có dùng được ngay không?
Thường là được, nhưng Figma hay giữ lại nhiều thứ dư như tên layer, metadata và clip-path không cần thiết. Chạy qua SVGO một lần trước khi đưa lên web để giảm dung lượng và làm code gọn hơn. Công cụ này miễn phí và có phiên bản chạy online.
SVG có bị lỗi khi in trang không?
Ngược lại, SVG in tốt hơn PNG rõ rệt. Vì SVG là vector, bản in ở độ phân giải 300DPI hay 600DPI vẫn sắc nét. Logo SVG in ra giấy bảng hiệu trông tốt hơn nhiều so với PNG chụp màn hình đem đi in.
Nếu bạn đang lên kế hoạch xây dựng website dùng SVG cho logo và icon, tương thích tốt trên nhiều thiết bị, dịch vụ thiết kế website responsive của Web22 mô tả quy trình và phạm vi công việc cụ thể từ giai đoạn thiết kế đến bàn giao.