SVG là một định dạng hình ảnh vector (dựa trên XML), nên nó co giãn tới bất kỳ kích thước nào mà không bị mờ. Bạn có thể đưa nó vào theo hai cách chính, mỗi cách có sự đánh đổi riêng.
Inline SVG — markup trực tiếp trong HTML
html
Ưu điểm: bạn có thể style nó bằng CSS (fill, stroke), animate các phần của nó, đổi màu qua currentColor (kế thừa màu văn bản), và phản hồi sự kiện — vì nó là DOM thực sự. Không cần thêm HTTP request.
Nhược điểm: làm phình HTML, không được cache riêng, các icon lặp lại sẽ nhân bản markup.
<img> — tham chiếu như một file<img src="logo.svg" alt="Company logo" width="120" />
Ưu điểm: được trình duyệt cache, giữ HTML gọn gàng, đơn giản. Nhược điểm: bạn không thể style hay scripting phần bên trong của nó bằng CSS/JS của bạn — nó là một hình ảnh đục.
Cần đổi màu/animate/tương tác với SVG → inline SVG
Logo/minh họa tĩnh, muốn cache + HTML gọn → <img src=".svg">
Nhiều icon lặp lại → một SVG sprite (<use>) hoặc một icon component
<svg role="img" aria-label="Settings">...</svg> <!-- icon có ý nghĩa -->
<svg aria-hidden="true">...</svg> <!-- trang trí: ẩn khỏi AT -->
Chọn inline so với <img> SVG quy về việc bạn có cần style/animate đồ họa (inline) hay chỉ hiển thị nó một cách hiệu quả (<img>).
Các icon đổi màu khi hover hoặc theo theme thì dùng inline (thường dưới dạng component); các tài sản thương hiệu tĩnh thì dùng qua <img>.
Dù theo cách nào, vector vẫn sắc nét ở mọi độ phân giải — lý tưởng cho icon và logo.