16: Hệ thống biểu tượng SVG - Nguồn bên ngoài - Thủ thuật CSS

Đặt khối định nghĩa SVG đó ở đầu tài liệu chắc chắn hoạt động. Nó cũng có một số lợi thế, chẳng hạn như thực tế là không cần thực hiện yêu cầu HTTP nào, tất cả thông tin để vẽ đồ họa đều nằm ngay trên trang. Tuy nhiên, nó cũng có một số nhược điểm. Tất cả thông tin đó cần được trình duyệt phân tích cú pháp trên mỗi trang, từ tài liệu. Nó không phải là một tài liệu riêng biệt có thể đã được khách hàng lưu vào bộ nhớ đệm, giống như các nội dung khác. Và nói về bộ đệm, nếu trang web của bạn lưu vào bộ đệm HTML (thường là một ý kiến hay), bạn có thể coi đây là “bộ đệm trang bị phình ra” vì mỗi trang được lưu trong bộ đệm đều bao gồm khối mã lặp lại lớn này - không phải là cách sử dụng bộ đệm máy chủ hiệu quả.

Tin tốt là chúng ta có thể chuyển khối SVG đó ra một tệp bên ngoài và sử dụng nó giống như chúng ta làm với một hình ảnh hoặc bất kỳ nội dung nào khác.

Khi chúng tôi sử dụng nó, đường dẫn tệp sẽ nằm trong thuộc tính, như sau:

Điều quan trọng cần biết: Các hạn chế tên miền chéo rất khó thực hiện. Ngay cả tiêu đề CORS cũng không giúp bạn theo kinh nghiệm của tôi. Vì vậy, không có CDN (thậm chí không thể phát trên CodePen và chắc chắn không thể phát tại tệp: // URL).

Một điều quan trọng khác cần biết: Bạn chắc chắn cần thuộc tính xmlns để điều này hoạt động. Như trong, khối định nghĩa SVG của bạn phải bắt đầu bằng:

Tôi có ấn tượng rằng bạn không cần điều đó trong tài liệu HTML5 (giống như cách bạn không cần nhập trên s), nhưng có lẽ vì tệp này không nằm trong giới hạn của tài liệu HTML5 nữa (nó được tham chiếu từ bên ngoài), bạn cần nó.

Vì lý do đó, bản demo cho điều này là ở đây.

Điều quan trọng không kém cần biết: Không có phiên bản IE nào hỗ trợ điều này (lên đến 11 phiên bản tại thời điểm xuất bản này). Nhưng có một cách để làm cho nó hoạt động, về cơ bản là Ajaxing trong bit SVG mà bạn cần và chèn nó vào nơi có thể, làm cho nó trở thành SVG nội tuyến “bình thường” được hỗ trợ. Chúng tôi phải mất một chút thời gian để làm cho điều này hoạt động và thử nghiệm trong Internet Explorer bằng BrowserStack, nhưng cuối cùng chúng tôi vẫn nhận được.