SVG Sprite là gì?
SVG Sprite là một file SVG duy nhất chứa nhiều biểu tượng (icon) khác nhau, mỗi biểu tượng được định nghĩa bằng thẻ <symbol>. Bạn chỉ cần tải file này một lần, sau đó có thể chèn icon ở bất kỳ đâu trên trang bằng cách gọi đến <use>.
“Gom icon SVG thành sprite giúp giảm HTTP request và tăng hiệu suất tải trang – đơn giản mà hiệu quả.”
Cách tạo SVG Sprite
Bước 1: Gom các SVG lại thành 1 file sprite
Bạn có thể dùng các công cụ như:
- https://svgsprite.dev/
- IcoMoon App
- Hoặc tự viết tay nếu số lượng ít
Ví dụ file icons.svg có thể như sau:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<path d="..."/>
</symbol>
</svg>Bước 2: Nhúng SVG sprite vào trang
Cách đơn giản nhất là chèn trực tiếp vào footer:
<?php include get_template_directory() . '/assets/icons.svg'; ?>Hoặc bạn có thể dùng Ajax để load SVG 1 lần duy nhất vào DOM khi trang được tải.
Bước 3: Gọi icon bằng thẻ <use>
Ở bất cứ đâu trong HTML, bạn chỉ cần:
<svg width="24" height="24">
<use xlink:href="#icon-home"></use>
</svg>
Với CSS, bạn có thể dễ dàng định dạng icon như màu, kích thước, hover v.v.
Lợi ích khi dùng SVG sprite
- Chỉ tải 1 file SVG duy nhất thay vì nhiều icon nhỏ
- Không cần dùng font-icon (đã lỗi thời)
- Dễ kiểm soát, dễ styling bằng CSS
- Thân thiện với màn hình Retina
Khi nào nên dùng SVG sprite?
Nên dùng khi:
- Website có nhiều icon SVG lặp lại
- Bạn muốn giảm request & tối ưu hiệu suất
- Không muốn phụ thuộc vào bên thứ 3 như Font Awesome
Kết luận
SVG sprite là một giải pháp đơn giản nhưng rất hiệu quả giúp tối ưu hóa tốc độ website. Nếu bạn đang dùng nhiều SVG lẻ hoặc icon ảnh, hãy cân nhắc chuyển sang giải pháp này – vừa tiết kiệm request, vừa linh hoạt và dễ bảo trì hơn rất nhiều.
Bình luận