Chuẩn Hóa ID SVG
Đổi tên mọi id trong file SVG thành tên duy nhất, dễ đoán — và sửa luôn mọi tham chiếu tới chúng. Dùng trước khi nhúng inline nhiều SVG vào cùng một trang, hoặc trước khi phát hành một bộ icon.
Mọi thứ chạy ngay trên máy bạn; không có gì được tải lên.
Vấn đề mà nó giải quyết
Phần mềm thiết kế đặt id kiểu a, b, Gradient_1, mask0_1_2. Nhúng inline hai file như vậy vào một tài liệu là id đụng nhau. HTML phân giải url(#a) theo #a đầu tiên trong tài liệu, nên icon thứ hai âm thầm mượn gradient, mask, filter hoặc clip path của icon thứ nhất.
Triệu chứng: icon ra sai màu, mất gradient, trong suốt hoàn toàn, hoặc biến mất ở trang này nhưng trang khác vẫn chạy. Console không báo lỗi gì — chính vì vậy mà lỗi này rất khó truy.
Cho mỗi file một tiền tố id riêng là hết đụng.
Các bước
- Dán mã SVG, hoặc bấm Tải file.
- Đặt Tiền tố — nên đặt riêng cho từng icon, ví dụ
arrow-left-. - Chọn cách đặt tên:
- Giữ tên cũ —
Gradient_1thànharrow-left-gradient-1. Dễ đọc, dễ debug. - Đánh số — mọi id thành
arrow-left-1,arrow-left-2, … Kết quả ngắn nhất.
- Giữ tên cũ —
- Có thể bật Bỏ id thừa để xóa các id không ai trỏ tới.
- Xem bảng Thay đổi và phần xem trước, rồi Sao chép hoặc Tải xuống.
Tùy chọn
Chuẩn hóa tên
Đưa phần tên giữ lại về chữ thường và thay các cụm ký tự không phải chữ/số bằng dấu gạch: Gradient_1 → gradient-1. Chỉ áp dụng ở chế độ Giữ tên cũ.
Bỏ id thừa
Xóa các thuộc tính id mà không thuộc tính, url(…) hay quy tắc <style> nào tham chiếu tới. Phần mềm thiết kế gắn id cho gần như mọi layer, và những id không dùng đó chỉ làm nặng file.
document.getElementById, một <use href="#part"> ở file khác, hay animation SMIL. Công cụ chỉ nhìn thấy tham chiếu nằm trong đúng file SVG bạn dán vào.
Những gì được sửa theo
Tham chiếu được cập nhật ở:
- mọi thuộc tính có chứa
url(#id)—fill,stroke,filter,clip-path,mask,marker-*,style; hrefvàxlink:hreftrỏ tới#id;- selector và giá trị
url()bên trong khối<style>inline; - các thuộc tính thời gian SMIL như
begin="other.click"khi viết dạng#id.
Id trùng nhau trong file gốc được báo lại và tự động tách thành duy nhất (icon-a, icon-a-2).
Câu hỏi thường gặp
File của tôi có bị tải lên đâu không?
Không. Toàn bộ việc sửa được làm trong trình duyệt bằng bộ phân tích XML có sẵn.
Việc này có làm hỏng CSS hay JavaScript của tôi không?
Có, nếu trang của bạn trỏ tới các id cũ từ bên ngoài file — đổi tên thì đúng là như vậy. Hãy tìm tên cũ trong mã nguồn, hoặc dùng Giữ tên cũ kèm tiền tố để tên mới vẫn nhận ra được.
Chỉ dùng một SVG mỗi trang thì có cần không?
Không. Đụng độ chỉ xảy ra khi có nhiều SVG inline trùng id. SVG nạp qua <img> hay background-image nằm trong tài liệu riêng nên không thể đụng.
Nên đặt tiền tố thế nào?
Đặt theo icon: arrow-left-, logo-, chart-legend-. Dùng chung một tiền tố cho mọi icon là mất luôn tác dụng.
Sau khi chuẩn hóa, phần xem trước mất gradient thì sao?
Nghĩa là còn một dạng tham chiếu bị bỏ sót. Đừng phát hành file đó — hãy gửi lại để bổ sung mẫu nhận diện.
SVGO đã làm việc này rồi mà?
cleanupIds của SVGO rút gọn và bỏ id thừa, nhưng mặc định không thêm tiền tố theo file, nên đụng độ giữa các file vẫn còn. Hai công cụ bổ trợ nhau: tối ưu trước, chuẩn hóa sau.