Làm cách nào để chúng tôi có thể lưu trữ SVG nội tuyến trong Trình duyệt?

Question

Các SVG đã tồn tại trong nhiều năm do khả năng mở rộng của nó và nó quen thuộc lâu dài rằng lợi ích của SVG nội tuyến là người ta có thể thao tác với CSS và JS, và khi chúng ta lặp lại cùng một SVG trên tài liệu html, có thể sử dụng thẻ <use> để tham chiếu phần tử gốc. Hơn nữa, SVG nội dòng cũng có thể giảm số lượng yêu cầu HTTP. Tuy nhiên, nhiều bài viết đề xuất (mà không giải thích chi tiết) trong khi chúng tôi sử dụng SVG nội tuyến để lưu yêu cầu HTTP, trình duyệt không còn có thể lưu vào bộ nhớ cache như một chủ đề riêng biệt, có nghĩa là không thể sử dụng lại trên các trang. Khi tôi sử dụng SVG nội dòng rộng rãi cho một dự án, tôi muốn biết chính xác cách SVG nội tuyến (phần tử html5 nổi tiếng, là một đề xuất w3c) có thể được lưu trong trình duyệt trong khi sử dụng SVG với thẻ <img> hoặc background-image có thể lưu vào bộ nhớ cache.

Nếu DOM có thể lưu vào bộ nhớ cache thì tại sao không thể là SVG DOM? (mà xây dựng dựa trên và tương thích với DOM Level 2. Tài liệu tham khảo: https://www.w3.org/TR/SVG/svgdom.html)

Cho đến nay, giải pháp tôi đã đưa ra cachebility là sử dụng Data URI scheme (Also Ref: Optimizing svgs in data uris) Nhưng bằng cách làm như vậy, nó sẽ mất khả năng xử lý CSS và JS để tạo kiểu và thao tác.

Một vài ví dụ trên web đề xuất việc sử dụng JS để tải tài nguyên có thể lưu vào bộ nhớ cache hoặc bằng cách thay thế các phần tử trình giữ chỗ như thẻ <object>, cũng như sử dụng localStorage, CacheStorage và Service Worker. Nhưng tôi vẫn cần một số dòng hướng dẫn để bắt đầu đạt được một giải pháp lý tưởng.

Ai đó có thể cho tôi một ít ánh sáng?

-

-

-

Ref: Caching SVG Sprite in localStorage

Ref: Inline SVG and caching

Ref: SVG ON THE WEB

Ref: Do Inline SVGs Weigh Down Websites?