SVG giữ đường nét sắc sảo ở mọi mật độ điểm ảnh và có thể điều chỉnh màu theo giao diện. Sự linh hoạt đó đi kèm một điều kiện: tệp phải tự chứa đủ tài nguyên, đơn giản và dễ nhận diện trong không gian rất nhỏ.
Tạo khung vuông bằng viewBox
Dùng viewBox vuông, chẳng hạn 0 0 64 64, và chừa khoảng đệm quanh biểu tượng. viewBox xác định hệ tọa độ mà không áp đặt kích thước hiển thị vật lý.
Tinh giản thiết kế còn các hình dáng đặc trưng. Chi tiết mảnh, khoảng rỗng nhỏ trong chữ và từ đầy đủ thường biến mất ở 16 pixel dù tệp vector vẫn sắc nét về kỹ thuật.
| Thành phần | Lý do | Cách thử |
|---|---|---|
| viewBox vuông | Dễ dự đoán vùng cắt | Xem trước 16×16 |
| Đường nét đơn giản | Dễ nhận diện | Thẻ sáng và tối |
| Không phụ thuộc bên ngoài | Tải độc lập | Ngắt kết nối mạng |
| ICO dự phòng | Trình duyệt cũ | URL thư mục gốc |
Đảm bảo tệp độc lập
Nhúng các kiểu cần thiết vào SVG. Chuyển chữ thành đường nét khi biểu tượng phụ thuộc kiểu chữ, vì phông web bên ngoài không phải tài nguyên đáng tin cậy trong ngữ cảnh này.
Bỏ script, liên kết từ xa và metadata không cần thiết của phần mềm thiết kế. Hình và kiểu đơn giản cũng giúp việc kiểm tra bảo mật dễ hơn, đồng thời giảm dung lượng tệp.
Cuối cùng, mở riêng tệp trong trình duyệt và thử ngoại tuyến. Nếu thiết kế thay đổi hoặc biến mất, tệp vẫn phụ thuộc tài nguyên ngoài cần được nhúng vào hoặc thay thế.
Khai báo SVG cùng phương án dự phòng
Thêm link rel icon với type image/svg+xml và URL tính từ thư mục gốc. Đồng thời giữ favicon.ico ở gốc cho trình duyệt không chọn SVG hoặc yêu cầu ICO trực tiếp.
SVG không thay thế biểu tượng Apple Touch hay biểu tượng manifest. Xuất PNG không trong suốt hoặc maskable cho các giao diện đó.
Điều chỉnh màu theo giao diện
Quy tắc prefers-color-scheme trong phần tử style có thể thay đổi fill hoặc stroke ở chế độ tối. Trước hết xác định màu mặc định hiển thị ổn định, rồi thêm phiên bản khác như một cải tiến tăng cường.
Thử tệp trong thẻ trình duyệt thật và ở nhiều mức thu phóng. Kiểm tra cả phương án dự phòng khi SVG không được chọn: ICO biến mất trên nền tối vẫn gây vấn đề cho các trình duyệt đó.
Nguồn chính thức
Câu hỏi thường gặp
SVG có cần width và height không?
viewBox vuông là thành phần quan trọng để co giãn. Có thể thêm width và height cụ thể, nhưng trình duyệt sẽ chỉnh kích thước biểu tượng theo ngữ cảnh.
SVG có tải được phông chữ bên ngoài không?
Đừng dựa vào điều đó. Chuyển chữ thành đường nét để tệp độc lập và hiển thị nhất quán.
Chỉ SVG có đủ cho iOS không?
Không. Cung cấp biểu tượng Apple Touch PNG riêng, không trong suốt, cho màn hình chính.