How can we cache inline SVG in Browsers?

SVGs have been around for years due to its scalability and it is long-familiar that the benefit of inline SVG is one can manipulate it with CSS and JS, and when we want to repeat the same SVG over a html document, then we can use the <use> tag to reference the original element. Furthermore, inline SVGs could also reduce the number of HTTP requests.

However, many articles suggest (without explaining the details) that while we use inline SVG to save HTTP request, it is no longer cacheable by a browser.

As I happen to use inline SVGs extensively for a project, I would like to know exactly why inline SVG (the renowned html5 element, which is a w3c recommendation) cannot be cached in browsers whilst using SVGs with <img> tag or background-image are cacheable.

If DOM is cacheable, then why can't the SVG DOM ? (which builds upon and is compatible with DOM Level 2. Ref: https://www.w3.org/TR/SVG/svgdom.html)

So far, the solution I came up with cachebility is to use Data URI scheme (Also Ref: Optimizing svgs in data uris ) But by doing so, it loses the ability to deal with CSS and JS for styling and manipulation.

Could someone shed me some light please?