Over the years, SVGs have remained popular due to their scalability. One key advantage of inline SVG is the ability to manipulate it with CSS and JS. Additionally, using the <use> tag allows for referencing the original element when repeating the same SVG in an HTML document, ultimately reducing the number of HTTP requests.
However, there are suggestions (without detailed explanations) that imply while using inline SVG may save on HTTP requests, it may not be cacheable as a separate entity by browsers - making it less reusable across different pages.
Given my extensive use of inline SVG for a project, I am keen to understand how this renowned html5 element can be cached within browsers, especially compared to SVGs used with the <img> tag or as background-image, which are cacheable.
If the DOM is cacheable, why can't the SVG DOM be as well? (The SVG DOM is built upon and compatible with DOM Level 2. Reference: https://www.w3.org/TR/SVG/svgdom.html)
One approach I have considered for cacheability is utilizing the Data URI scheme. However, this method sacrifices the ability to handle CSS and JS for styling and manipulation.
Various suggestions online propose using JavaScript to load cacheable resources, replacing placeholder elements like the <object> tag, and leveraging tools such as localStorage, CacheStorage, and Service Worker. Despite these options, guidance on achieving an ideal solution would be greatly appreciated.
Could someone provide further insight?
-
-
-
Reference: Caching SVG Sprite in localStorage
Reference: Inline SVG and caching
Reference: SVG ON THE WEB
Reference: Do Inline SVGs Weigh Down Websites?