Как мы можем кэшировать встроенный SVG в браузерах?

SVGs существуют в течение многих лет из-за его масштабируемости, и давно известно, что преимущество встроенного SVG заключается в том, что можно манипулировать им с помощью CSS и JS, и когда мы хотим повторить тот же SVG над html-документом, мы можем использовать <use> тег для ссылки на оригинальный элемент. Кроме того, встроенные SVGs также могут уменьшить количество HTTP-запросов.

однако многие статьи предполагают (без объяснения деталей), что, хотя мы используем встроенный SVG для сохранения HTTP-запроса, он больше не кэшируется браузером как отдельная тема, что означает, что он не может быть повторно использован на страницах.

поскольку я широко использую встроенные SVGs для проекта, я хотел бы точно знать, как встроенный SVG (известный элемент html5, который является рекомендацией w3c) может быть кэширован в браузерах при использовании SVGs с <img> тег или background-image кэшируются.

если DOM кэшируется, то почему не может SVG DOM ? (который основывается и совместим с уровнем DOM 2. Ref:https://www.w3.org/TR/SVG/svgdom.html)

пока решение я придумал кэширование-это использование схема URI данных (Также См.: оптимизация svgs в uris данных ) Но при этом он теряет возможность иметь дело с CSS и JS для стилизации и манипуляции.

несколько примеров в интернете предлагают использовать JS для загрузки кэшируемого ресурса или путем замены элементов-заполнителей, таких как <object> tag, а также использование хранилище localStorage, CacheStorage и Работник Сервиса. Но мне все еще нужны некоторые направляющие линии, чтобы начать добиваться идеального решения.

может кто-нибудь пролить на меня свет, пожалуйста?

-

-

-

Ref:кэширование Спрайта SVG в localStorage

Ref:встроенный SVG и кэширование

Ref:SVG В ИНТЕРНЕТЕ

Ref: Встроенные SVGs Утяжеляют Веб-Сайты?