SVG là gì? Khi nào nên dùng SVG trên website?
Logo bị mờ trên màn hình retina, icon phải xuất nhiều kích thước và animation cần giữ nét khi phóng to. SVG giải quyết tốt các bài toán hình học như vậy, nhưng không phải lựa chọn tối ưu cho mọi hình ảnh.
Tóm tắt nhanh: SVG là định dạng đồ họa vector dựa trên XML, mô tả shape, path, text và style. Nó phù hợp logo, icon, diagram và illustration có hình học; ảnh chụp vẫn thường phù hợp raster như WebP/AVIF hơn.
SVG là gì?
SVG viết tắt của Scalable Vector Graphics. Theo đặc tả W3C SVG 2, đây là ngôn ngữ dựa trên XML để mô tả đồ họa vector hai chiều và nội dung kết hợp vector/raster.
Ví dụ tối giản:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#14b8a6" />
</svg>Thay vì lưu màu từng pixel, SVG lưu lệnh vẽ. Vì vậy hình có thể scale mà cạnh vẫn sắc nét.
Ưu điểm của SVG
Scale linh hoạt
SVG phù hợp responsive layout, retina display và zoom. Một file có thể dùng ở nhiều kích thước nếu chi tiết vẫn đọc được.
Có thể nhỏ với hình đơn giản
Logo/icon hình học thường nhẹ hơn nhiều file PNG đa kích thước. Nhưng SVG phức tạp với hàng nghìn node có thể lớn và chậm.
Style và tương tác
Inline SVG có thể nhận CSS, event và animation. Điều này hữu ích cho icon state, data visualization và motion.
Accessibility có thể kiểm soát
SVG trang trí nên được ẩn khỏi assistive technology. SVG mang thông tin cần accessible name/description phù hợp. Cách triển khai phụ thuộc dùng <img> hay inline.
Dễ tích hợp design system
Icon có thể dùng currentColor, giúp đổi màu theo text/state mà không xuất file mới.
Hạn chế của SVG
Không phù hợp ảnh chụp
Vector hóa ảnh phức tạp tạo file nặng và kết quả kém tự nhiên. Dùng raster tối ưu cho photography.
Có rủi ro bảo mật
SVG có thể chứa script, link hoặc external resource. Không inline SVG không tin cậy từ user upload nếu chưa sanitize.
DOM phức tạp có thể chậm
Hàng nghìn path, filter và animation gây tải render. “Vector” không đồng nghĩa “luôn nhẹ”.
Cách nhúng ảnh hưởng khả năng style
SVG qua <img> dễ cache và cô lập nhưng không style từng path từ CSS ngoài. Inline SVG linh hoạt hơn nhưng tăng HTML/DOM.
Khi nào nên dùng SVG?
- logo và brand mark;
- icon;
- diagram;
- chart;
- map đơn giản;
- illustration vector;
- decorative shape;
- animation hình học;
- loading indicator.
Không nên mặc định dùng cho screenshot, texture hoặc ảnh người.
Các cách nhúng SVG
Dùng <img>
<img src="/logo.svg" alt="Mikel Studio">Phù hợp asset độc lập, cache tốt và markup đơn giản.
Inline SVG
Phù hợp khi cần style/animate path hoặc kiểm soát accessibility sâu. Tránh lặp một SVG lớn hàng chục lần trong DOM.
CSS background
Phù hợp decoration. Không dùng cho nội dung cần alt text.
Sprite hoặc icon component
Hữu ích cho design system, nhưng cần quy ước build và tree-shaking rõ.
Tối ưu SVG
- đặt
viewBoxđúng; - bỏ metadata/editor data;
- giảm decimal precision hợp lý;
- merge/simplify path;
- tránh filter nặng;
- dùng
currentColorcho icon; - minify bằng SVGO hoặc tool tương tự;
- test visual sau optimize;
- không đặt width/height cứng làm vỡ responsive;
- cache asset;
- sanitize nguồn không tin cậy.
SVG và SEO
SVG không tự tăng SEO. Search engine có thể xử lý asset và nội dung quanh nó, nhưng giá trị đến từ trải nghiệm, tốc độ và context. Text quan trọng nên tồn tại trong HTML, không phụ thuộc hoàn toàn vào chữ vẽ trong SVG.
Accessibility checklist
SVG trang trí
Có thể dùng alt="" khi qua <img>, hoặc aria-hidden="true" cho inline decorative icon.
SVG mang thông tin
Cần accessible name rõ, ví dụ alt, aria-label, hoặc liên kết <title>/<desc> phù hợp với pattern triển khai.
Không dùng icon màu đơn lẻ để truyền status; thêm label hoặc shape.
Công cụ hỗ trợ
- Figma/Illustrator/Affinity Designer;
- SVGOMG/SVGO;
- browser DevTools;
- vector editor mã nguồn mở;
- lint/build plugin trong frontend pipeline.
Những lỗi thường gặp
- Export toàn artboard thay vì icon.
- ViewBox dư khoảng trắng.
- Path quá phức tạp.
- Inline SVG từ nguồn không tin cậy.
- Thiếu accessible name.
- Hard-code fill nên dark mode lỗi.
- Dùng SVG cho ảnh chụp.
- Animation không hỗ trợ reduced motion.
Mikel Studio có thể hỗ trợ gì?
Mikel Studio có thể chuẩn hóa web asset pipeline cho logo, icon và illustration: naming, optimization, React component, accessibility và responsive behavior.
Câu hỏi thường gặp
SVG có luôn nhẹ hơn PNG không?
Không. Với hình đơn giản thường nhẹ; với vector cực phức tạp có thể nặng hơn raster tối ưu.
SVG có bị mờ không?
Shape vector scale sắc nét, nhưng raster image nhúng trong SVG vẫn có giới hạn độ phân giải.
Có thể dùng SVG làm favicon không?
Trình duyệt hiện đại hỗ trợ trong nhiều trường hợp, nhưng nên chuẩn bị fallback theo yêu cầu sản phẩm.
Kết luận
SVG là công cụ mạnh khi hình ảnh được mô tả bằng shape và path. Chọn đúng use case, tối ưu DOM, accessibility và security sẽ quan trọng hơn việc đổi mọi asset sang vector.