SVG / Biểu tượng

Trình tạo sprite SVG: Symbol và cách dùng biểu tượng

Thả nhiều biểu tượng SVG để tạo sprite symbol. Làm sạch mã đánh dấu, loại bỏ ID trùng từ tên tệp, giữ nguyên viewBox, tùy chọn chuyển fill thành currentColor và tải xuống sprite.svg.

Trình tạo sprite SVG: Symbol và cách dùng biểu tượng: Thả một nhóm biểu tượng SVG vào để nhận một tệp sprite có một symbol cho mỗi biểu tượng, cùng đoạn mã để sử dụng từng biểu tượng. Script, tài nguyên bên ngoài và mọi nội dung không an toàn sẽ bị xóa; kích thước sẽ được chuyển thành viewBox khi cần, còn fill có thể chuyển thành currentColor để biểu tượng tự dùng màu của văn bản. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục: Công cụ lập trình viên
Lượt chạy: Trong trình duyệt của bạn
Chi phí: Miễn phí · không cần đăng ký
Trạng thái khả dụng: Sẵn sàng sử dụng

Sprite biểu tượng SVGXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

Tập lệnh, trình xử lý sự kiện, tài nguyên bên ngoài, hình ảnh nhúng, văn bản và các phần tử không được hỗ trợ sẽ bị xóa. Các kiểu nội tuyến cơ bản được chuyển thành thuộc tính trình bày. Nếu thiếu viewBox, công cụ sẽ dùng chiều rộng và chiều cao dạng số, với giá trị dự phòng là 24 đơn vị cho mỗi chiều bị thiếu. Hãy kiểm tra từng bản xem trước trước khi sử dụng.

Chỉnh sửa biểu tượng SVG

Ký hiệu và tái sử dụng

SVG 2 quy định các phần tử symbol và use cùng cách chúng hoạt động với viewBox: https://www.w3.org/TR/SVG2/struct.html#SymbolElement ; https://www.w3.org/TR/SVG2/struct.html#UseElement

Xử lý và tô màu cục bộ

Mỗi biểu tượng được dựng lại từ danh sách các phần tử và thuộc tính SVG an toàn, vì vậy tập lệnh, trình xử lý sự kiện và tài nguyên bên ngoài không thể truy cập sprite. Không có bộ biểu tượng của bên thứ ba nào được đưa vào. SVG paint và currentColor được quy định tại https://www.w3.org/TR/SVG2/painting.html . Người dùng tự chịu trách nhiệm về giấy phép của các biểu tượng đã tải lên.

Cách sử dụng

Thả tối đa 60 biểu tượng SVG, mỗi tệp dưới 1 MB.
Kiểm tra bản xem trước đã làm sạch và tùy chọn chuyển fill thành currentColor.
Tải xuống sprite, rồi chọn một biểu tượng để sao chép đoạn mã sử dụng.

Quyền riêng tư và giới hạn

Các tệp SVG của bạn vẫn ở trên thiết bị. Công cụ không truy xuất URL được nhúng và không tải các biểu tượng lên.

Công cụ liên quan

Câu hỏi thường gặp

Tôi sử dụng sprite như thế nào?

Chèn SVG của sprite một lần vào một vùng chứa ẩn trên trang, sau đó dùng các đoạn mã nội tuyến đã sao chép. Nếu dùng một tệp riêng, hãy thay vào đó dùng sprite.svg#id làm href.

Điều gì xảy ra khi thiếu viewBox?

Chiều rộng và chiều cao dạng số, bao gồm cả đơn vị px, sẽ xác định một viewBox mới. Mọi kích thước bị thiếu hoặc không được hỗ trợ đều mặc định là 24 đơn vị. Bản xem trước sẽ đánh dấu các viewBox đã được sửa để bạn kiểm tra việc cắt hình.

Mọi biểu tượng có giữ nguyên chính xác hình thức ban đầu không?

Không. Các hình cơ bản, nhóm, chuyển màu, vùng cắt và mặt nạ được giữ lại, nhưng script, văn bản, hình ảnh nhúng, phần tử use và kiểu định dạng không được hỗ trợ sẽ bị xóa. Hãy kiểm tra bản xem trước. Bạn vẫn chịu trách nhiệm về giấy phép của các tác phẩm được tải lên.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản