inline-or-cache-svg---both
inline-or-cache-svg---both copied to clipboard
Published
20 hours ago •
chriscoyier
chriscoyier
Inserting the cached SVG using JS
Regarding this. Wouldn't you be able to do something like this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Caching</title>
</head>
<body>
<p>This page benefits from the caching, where as <a href="/">this one</a> cached the stuff.</p>
<div data-cached-svg="/icons/icon-wheelchair.svg" />
<script>
const nodes = document.querySelectorAll(`[data-cached-svg]`);
caches.open('static').then(function(cache) {
for (const node of nodes) {
cache.match(node.getAttribute('data-cached-svg')).then(async (response) => {
const text = await response.text();
node.innerHTML = text;
});
}
});
</script>
</body>
</html>
I wonder if a clever solution with a <use /> tag would be possible though. 🤔
This is EXACTLY where I hoped this was headed. I just wanted to use IMG at first to prove it was possible. Inline SVG is way more desireable. We should try to <use> out of the cache, that sounds like the cleanest way.
I also wonder what the best approach is for not duplicating the SVG's like is in the repo now. Probably some super simple tooling like a <?php include or some Nunjucks injector or something.
