dựng sprite
☞ chạy hoàn toàn trong trình duyệt — không có gì được tải lênThả icon SVG của bạn vào đây
hoặc bấm để chọn — tối đa 40 tệp SVG
Xem trước
Dán đoạn này vào nơi bạn muốn icon xuất hiện
OneImageTool
Công cụ ảnh miễn phí
dựng sprite
Thả icon vào và nhận một tệp sprite gồm các phần tử symbol, cùng dòng use cho từng icon, dán là dùng được.
hoặc bấm để chọn — tối đa 40 tệp SVG
Xem trước
một tệp, mỗi icon một tham chiếu
Mỗi icon nạp thành một tệp riêng là một yêu cầu riêng, một mục bộ nhớ đệm riêng và một cơ hội riêng để đến trễ mất một khung hình. Sprite gấp tất cả vào một tài liệu: mỗi icon trở thành một symbol với viewBox của chính nó, không cái nào tự vẽ, và bạn lôi ra chỗ nào cần bằng use href="#icon-name". Vì tham chiếu đi theo id chứ không theo URL, icon thừa hưởng currentColor và phần CSS đặt trên thẻ svg bao quanh nó — đúng thứ mà một chồng thẻ img không làm được.
Phần khó không phải là gói lại, mà là tên gọi. Bốn mươi icon xuất từ một công cụ thiết kế sẵn sàng chứa bốn mươi gradient tên "a" và bốn mươi lớp tên "cls-1"; vừa dùng chung một tài liệu là cái sau lặng lẽ chiếm màu của cái trước. Vì vậy mọi id và lớp bên trong một icon đều được đổi tên với id symbol của chính icon đó làm tiền tố, và cả bốn chỗ một tham chiếu có thể ẩn mình — url() trong thuộc tính, href trỏ tới một mảnh, thuộc tính style, và CSS bên trong phần tử style — đều được viết lại theo. Không icon nào lem sang icon khác.
ba bước
Tối đa 40 tệp SVG mỗi lần, phân tích ngay trong trình duyệt. Dùng mũi tên để đổi thứ tự; thứ tự đó chính là thứ tự các symbol trong tệp.
Mỗi symbol được đặt tên theo tệp với tiền tố ở phía trước, và danh sách hiển thị kết quả. Hai tệp trùng tên sẽ được thêm số, để không có hai symbol cùng giành một id.
Sprite đưa thẳng vào trang của bạn hoặc phục vụ dưới dạng sprite.svg; đoạn mã cho bạn một dòng sẵn sàng dán cho mỗi icon.
giải đáp nhanh
Có hai cách. Dán cả sprite ở gần đầu HTML rồi tham chiếu một icon bằng use href="#icon-name"; hoặc phục vụ tệp đó và tham chiếu bằng use href="/sprite.svg#icon-name". Cách đầu tiết kiệm một yêu cầu, cách sau để trình duyệt lưu đệm một sprite dùng chung cho mọi trang.
Từ tên tệp: chuyển thành chữ thường, mọi ký tự không phải chữ hay số đổi thành dấu gạch nối, rồi thêm tiền tố ở trước. Vậy arrow_left.svg với tiền tố mặc định thành icon-arrow-left.
Id của XML không được bắt đầu bằng chữ số, mà tên tệp kiểu 2-arrow.svg thì rất phổ biến. Tiền tố còn tránh cho id icon đụng với id đã có sẵn trên trang của bạn. Bạn có thể đổi hoặc xóa trống; nếu xóa trống khiến id không hợp lệ, một tiền tố dự phòng sẽ được đặt lại.
Tệp thứ hai được thêm số. Nếu không, cả hai symbol sẽ mang cùng một id và mọi tham chiếu tới nó đều vẽ ra icon đầu tiên — một bức hình sai một cách lặng lẽ, chứ không phải một lỗi báo ra.
Còn. Mọi id và lớp bên trong một icon đều được đổi tên với id symbol của nó làm tiền tố, và các tham chiếu được viết lại theo: url() trong thuộc tính, href dạng mảnh, thuộc tính style, và CSS bên trong phần tử style.
Nếu icon dùng fill="currentColor" thì được: đặt color trên thẻ svg chứa tham chiếu và icon sẽ theo. Icon có màu tô cố định thì giữ nguyên màu đó; sprite không viết lại màu của bạn.
Tối đa 40 mỗi lần. Bản thân sprite không có giới hạn thực sự, nhưng một tấm lớn hơn nhiều thì thường nên tách theo từng khu vực của trang web, để mỗi trang chỉ mang những icon nó thực sự dùng.
Không. Các tệp SVG được phân tích và lắp ráp bên trong trình duyệt của bạn, và bản xem trước là một blob URL từ chính máy bạn. Công cụ này không hề có máy chủ nào để nhận tệp.
Có — miễn phí, không hình mờ và không cần đăng ký.