Khi chúng ta có thứ mà chúng ta gọi là “khối định nghĩa” SVG - đoạn SVG xác định tất cả những thứ chúng ta muốn vẽ sau này - chúng ta đặt nó ở đâu? Cho đến nay, chúng tôi đã đưa nó trực tiếp vào HTML và điều đó hoàn toàn hoạt động. Nếu chúng tôi để nó ở đầu trang, hãy nói ngay sau thẻ mở :
Điều đó sẽ hoạt động tốt trong tất cả các trình duyệt hỗ trợ SVG.
Nó có thể được hấp dẫn để chuyển điều này xuống. Có lẽ các biểu tượng không quá quan trọng đối với trang, không quan trọng bằng nội dung thực mà trang chúng dùng để phân phối, vì vậy chúng tôi di chuyển các biểu tượng xuống cuối trang thay vào đó, trì hoãn việc tải chúng như chúng ta thường làm với JavaScript. Chúng tôi đã thử điều này trong video nhưng gặp sự cố với Safari hiển thị các biểu tượng mà chúng tôi sau đó đã thử . Thành thật mà nói, tôi đã thấy hành vi không nhất quán hoặc nhiều loại khác nhau trong các trình duyệt khác cũng làm theo cách này và có vẻ như bối cảnh đang thay đổi một chút về vấn đề này. Vì vậy, tôi đã nghe nói: là một điều khó thực hiện. An toàn nhất để đặt khối ở trên cùng nếu bạn kết thúc việc giữ các lỗi ngay trong tài liệu của mình.
Trong video này, chúng tôi xem xét một số thử nghiệm cơ bản của tất cả những điều này và sau đó xem xét một số trang web trong thế giới thực đang sử dụng hệ thống này và cách / nơi họ chèn khối svg defs.
Xem Bút 954e71cb5d5e79fb61d3c89bb3f21b8a của Chris Coyier (@chriscoyier) trên CodePen.
Ghi chú
Tôi thích thuật ngữ “SVG defs block” - để chúng ta có thể gọi nó là thứ có mục đích cụ thể nhưng không thực sự có tên chính thức. Tuy nhiên, không phải lúc nào bạn cũng cần thực sự sử dụng thẻ. Khi bạn sử dụng s, chúng không tự hiển thị, và thực sự tôi không nghĩ rằng nó phải ở bên trong . Tôi đã nghe các định nghĩa về gradient trong SVG giống nhau và thậm chí sẽ không hoạt động nếu chúng ở trong . Bất chấp điều đó, nó vẫn là “khối mã SVG mà chúng tôi sẽ xác định để sử dụng sau này” vì vậy tôi có thể sẽ tiếp tục gọi nó là “khối mã SVG”.