Sprite symbol SVG: giữ ID, viewBox và màu sắc

Sprite symbol SVG lưu các định nghĩa biểu tượng có tên trong một tệp SVG. Mỗi biểu tượng nhìn thấy dùng phần tử <use> để tham chiếu định nghĩa cần dùng. Việc đóng gói chỉ hoạt động nếu ID fragment, hệ tọa độ và quy tắc tô/vẽ được giữ khi chuyển từ từng tệp riêng.

Bắt đầu với hai biểu tượng trước khi ghép cả thư mục. Trong hướng dẫn này, lá dùng không gian tọa độ vuông và mũi tên phải dùng không gian rộng. Lá sẽ xuất hiện với hai màu mà không lặp đường dẫn. Mũi tên sẽ giữ tỷ lệ thay vì bị ép vào khung vẽ của lá.

Nếu các biểu tượng nguồn vẫn cần hình dạng, khoảng đệm hoặc độ đậm thị giác nhất quán, hoàn thành quy trình chuẩn bị SVG cho bộ UI trước. Sprite tổ chức hình; nó không sửa hình.

Tạo hai định nghĩa symbol có tên

Lưu ví dụ tự tạo này thành sprite.svg:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

Tên lá là pv-leaf; tên mũi tên là pv-arrow. Đây là định danh trang sẽ yêu cầu. MDN mô tả symbol là định nghĩa đồ họa tái sử dụng được tạo bản thể hiện qua use. Tệp chỉ chứa symbol có thể trông trống khi mở riêng vì định nghĩa không được hiển thị trực tiếp.

Giữ viewBox cùng hình mà nó mô tả. Ở đây lá dùng 0 0 24 24, mũi tên dùng 0 0 32 16. Các số đó xác định giới hạn tọa độ, không phải kích thước hiển thị bắt buộc. Đổi giới hạn mũi tên thành 24 × 24 mà không chỉnh hình học không phải chuẩn hóa. Xem tài liệu viewBox của MDN về ánh xạ giữa tọa độ và khung nhìn.

Với bộ biểu tượng có sẵn, giữ lưới đã thống nhất. Các hình khác dạng ở đây nêu ý khác: đóng gói cần giữ hệ tọa độ bạn đã duyệt. Nếu mũi tên cần theo đầu cuối đường thẳng hoặc đường cong, dùng marker SVG để căn đầu mũi tên tùy chỉnh nhằm xác định điểm gắn và hướng.

Tham chiếu sprite từ trang

Đặt sprite.svg, trang HTML và icons.css trong cùng thư mục được phục vụ. Bắt đầu với bản xem trước HTTP cùng nguồn để các hạn chế khi mở tệp cục bộ hoặc dùng máy chủ khác không che khuất lỗi tham chiếu cơ bản.

Thêm các quy tắc này vào icons.css và tải bảng định kiểu đó từ trang:

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

Sau đó thêm các bản thể hiện này vào body HTML:

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

Phần trước # xác định tệp; phần sau chọn symbol. Thuộc tính hiện đại là href. Tài liệu use của MDN mô tả tham chiếu ngoài và cảnh báo trình duyệt có thể từ chối tải khác nguồn. Đừng cho rằng chuyển sprite đang hoạt động sang CDN là thay đổi có thể áp dụng ngay mà không cần điều chỉnh; thử vị trí bàn giao thực tế.

Ở cỡ chữ gốc mặc định của trình duyệt, các quy tắc cho lá hộp 24 × 24 pixel CSS và mũi tên hộp 48 × 24. Kích thước dùng rem, nên cỡ chữ gốc khác sẽ thay đổi chúng. So sánh biểu tượng trong thành phần thực tế cùng bản xem trước phóng lớn: hộp đúng vẫn có thể chứa hình có quá nhiều khoảng đệm.

Nút ở trên minh họa cách trình bày và đặt tên biểu tượng. Thêm trình xử lý hành động riêng của ứng dụng khi dùng trong sản phẩm.

Chọn quy tắc tô/vẽ trước khi ghép tệp

Cả hai đường dẫn ví dụ dùng rõ fill="currentColor". Điều này cho phép bản thể hiện sử dụng lấy CSS color bao quanh: nút cung cấp xanh ngọc, mũi tên cung cấp navy. Tài liệu color giải thích currentColor có thể cung cấp giá trị dùng cho màu tô và đường viền.

Với lần xuất hiện thứ hai của lá, dùng cùng tham chiếu pv-leaf và đổi color của bản thể hiện thành san hô. Đừng lặp đường dẫn chỉ để tạo màu giao diện khác.

Đừng thay mọi màu tô trong logo nhiều màu bằng currentColor. Điều đó chủ động loại bỏ bảng màu. Nếu tệp đã đổi màu trước khi đóng gói sprite, dùng hướng dẫn xử lý màu SVG để tách vấn đề trước đó.

Cũng tránh dựng API sprite dựa trên bộ chọn trang tùy ý truy cập đường dẫn được tham chiếu. MDN lưu ý hạn chế định kiểu nội dung nhân bản trong use. Đặt hành vi tô/vẽ dự định trong hình nguồn và thử nơi sử dụng.

Ngăn ID trùng bên trong hình

Tên symbol duy nhất là cần thiết, nhưng SVG xuất ra có thể chứa thêm ID bên trong: chuyển sắc, mặt nạ, đường dẫn cắt hoặc định nghĩa được tham chiếu khác. MDN yêu cầu mỗi id SVG duy nhất trong cây nút của nó. Hai tệp trước đây riêng biệt có thể vi phạm khi ghép.

Ví dụ, giả sử bản xuất lá và huy hiệu đều chứa chuyển sắc tên paint0. Thêm tiền tố cho ID chuyển sắc của lá và tham chiếu khớp cùng nhau:

Fragment vẫn phải trỏ tới định nghĩa dự định. Ví dụ fill của MDN cho thấy quan hệ giữa ID chuyển sắc và url(#...). Cho huy hiệu tiền tố riêng thay vì để cả hai tham chiếu trỏ tới chuyển sắc của lá.

Ví dụ hai đường dẫn của chúng tôi không có định nghĩa lồng, nên là phép kiểm tra đầu tiên hữu ích. Với bản xuất thực tế, thống kê mọi ID và tham chiếu cục bộ trước khi ghép tệp. Sau khi chạy công cụ tối ưu hoặc tạo, lặp thống kê trên sprite bàn giao. Chỉ đổi tên symbol ngoài không giải quyết ID nội bộ trùng.

Đặt tên mỗi bản thể hiện nhìn thấy theo ngữ cảnh

Lá cạnh chữ “Garden” nhìn thấy lặp thông tin nút đã cung cấp. SVG của nó dùng aria-hidden="true", để văn bản nút cung cấp tên. Giữ thuộc tính đó trên SVG trang trí, không trên nút tương tác. Hướng dẫn aria-hidden của MDN trình bày nội dung trang trí và cảnh báo không ẩn phần tử có thể focus.

Mũi tên đứng riêng có vai trò khác: truyền đạt hướng mà không có chữ gần đó. SVG ngoài dùng role="img" và aria-label="Right direction", theo hướng dẫn MDN về đặt tên ảnh SVG nhúng.

Quyết định nhãn ở nơi sử dụng. Lá tái sử dụng có thể nghĩa là “Vườn”, “Có nguồn gốc thực vật” hoặc chỉ trang trí trong giao diện khác nhau. Thử tên trợ năng của thành phần cuối bằng công cụ kiểm tra trợ năng trình duyệt và công nghệ hỗ trợ đích; chỉ symbol tái sử dụng không xác định ngữ cảnh đó.

Kiểm tra sprite bàn giao, không chỉ tệp nguồn

Chúng tôi kiểm tra ví dụ tự tạo này trong mẫu trình duyệt cùng nguồn. Lá hiển thị xanh ngọc và san hô, mũi tên rộng giữ hình dạng, và fragment cố ý thiếu tạo hộp biểu tượng rỗng. Cây trợ năng trình duyệt hiện nút Garden và mũi tên có tên. Đây là kiểm tra mẫu này, không phải chứng nhận nhiều trình duyệt hoặc trình đọc màn hình.

Dùng cùng bộ kiểm tra nhỏ sau khi đóng gói:

1. Tệp: xác nhận trang tải sprite dự định từ URL cuối.
2. Fragment: so sánh mỗi fragment href với ID symbol bàn giao, kể cả chữ hoa thường.
3. Giới hạn: so sánh thành phần nhỏ và hình phóng lớn để tìm cắt, đệm và tỷ lệ.
4. Tô/vẽ: hiển thị biểu tượng một màu ở hai màu giao diện và kiểm tra riêng hình có màu cố định.
5. Tham chiếu nội bộ: kiểm tra tham chiếu màu, mặt nạ và vùng cắt có tiền tố vẫn tìm được đích sau tối ưu.
6. Ý nghĩa: kiểm tra tên mỗi thành phần tương tác và nhãn mỗi ảnh đứng riêng có ý nghĩa.

Nếu tệp tải nhưng một bản thể hiện trống, kiểm tra fragment trước khi đổi hình học. Nếu cùng hình cũng trống dưới dạng SVG thông thường, làm theo các bước kiểm tra SVG trống rộng hơn. Nếu nó vỡ pixel khi phóng lớn, kiểm tra ảnh raster nhúng trước khi cho rằng sprite gây lỗi.

Khi nguồn duy nhất là biểu tượng PNG

Nếu biểu tượng đơn giản chỉ còn PNG, chuyển PNG đó sang SVG bằng PerfectVector trước khi đóng gói. Kiểm tra dáng bao ngoài, lỗ và vùng màu kết quả với nguồn, rồi duyệt giới hạn tọa độ và quy tắc tô/vẽ. Cuối cùng, cho hình đã duyệt ID ổn định và thêm vào sprite. Chuyển đổi cung cấp hình vector; không chọn tên symbol, ngữ nghĩa thành phần hoặc kiến trúc bàn giao.

Nếu SVG gốc sạch tồn tại, dùng nó. Đồ lại thêm bước khôi phục hình mà không giải quyết tham chiếu fragment hỏng. Xem hướng dẫn chỉnh sửa và chuẩn bị SVG khi vấn đề còn lại nằm trong hình thay vì đóng gói.

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

Vì sao sprite SVG trống khi mở trực tiếp? Sprite chỉ chứa định nghĩa symbol không hiển thị trực tiếp các symbol đó. Thử qua bản thể hiện SVG use với đường dẫn tệp và ID fragment đúng trước khi coi tài liệu trống là hình hỏng.

Mọi symbol có cần cùng viewBox không? Không. Giữ từng hệ tọa độ đã duyệt khi đóng gói. Biểu tượng cùng lưới hệ thống thiết kế có thể dùng giới hạn khớp, nhưng symbol rộng không trở thành biểu tượng vuông chỉ bằng đổi số viewBox.

Vì sao đổi màu trang không đổi màu biểu tượng? Kiểm tra quy tắc tô/vẽ nguồn. Màu tô cố định khác đường dẫn được viết với currentColor. Giữ hình nhiều màu có chủ ý và chọn rõ màu tô hoặc đường viền nào cần kế thừa màu bản thể hiện.

Tôi có thể đặt sprite ở tên miền khác không? Đừng mặc định tham chiếu use ngoài sẽ hoạt động khác nguồn. Bắt đầu với mẫu cùng nguồn, rồi thử máy chủ thực và trình duyệt đích trước khi đổi cách bàn giao. Ví dụ cục bộ thành công không xác định hỗ trợ khác nguồn.

Nguồn tham khảo

1. MDN — symbol — Định nghĩa tái sử dụng và hiển thị gián tiếp.
2. MDN — use — Fragment ngoài, hạn chế định kiểu và hạn chế về nguồn gốc tải tệp.
3. MDN — viewBox — Quan hệ giữa giới hạn tọa độ và khung nhìn.
4. MDN — color — currentColor làm đầu vào cho tô/vẽ SVG.
5. MDN — id — Tính duy nhất định danh trong cây tài liệu.
6. MDN — fill — Tham chiếu nguồn tô/vẽ như URL chuyển sắc.
7. MDN — aria-hidden — Nội dung trang trí và lưu ý phần tử có thể focus.
8. MDN — vai trò img — SVG ngoài có nhãn cho ảnh mang ý nghĩa.

Bắt đầu với hai biểu tượng đã duyệt và thử tên, giới hạn, màu trong thành phần thực tế. Nếu một nguồn chỉ tồn tại dạng raster phù hợp, khôi phục đường dẫn SVG, kiểm tra hình, rồi thêm kết quả được chấp nhận vào sprite.