Demo page for
Blink discussion about data urls used in <svg:use>
<svg:use> is a good way of adding reusable icons to a web page, using something like
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="icon-reference"></use>
</svg>
</div>
The icon reference can refer to an external document, a local svg fragment, or use a data url.
It was understood that at least one page repeatedly used a large data url containing all urls for this.
Those would break if data urls are blocked.
Blink does have optimizations that try to prevent decoding, reloading and reparsing the data url every time it is used, but it still adds
a very large blob of text to the document, slowing down page load so it is not an optimal solution.
Better alternatives are to either put the icons in an external file or inline in the document.
Alternative 1
Working example
svgicons.svg with icons.
index.html using icons:
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="svgicons.svg#save-icon"></use>
</svg>
</div>
Alternative 2
Working example
Inline svg icons
<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="save-icon" viewBox="0 0 32 32">
<path d="M25.333 9.335c0 5.153-4.179 9.333-9.333 9.333s-9.333-4.18-9.333-9.333c0-5.156 4.179-9.335 9.333-9.335s9.333 4.179 9.333 9.335zM23.203 18.908c-2.008 1.516-4.499 2.427-7.203 2.427-2.707 0-5.199-0.913-7.209-2.429-5.429 2.391-8.791 9.835-8.791 13.095h32c0-3.231-3.467-10.675-8.797-13.092z">
</symbol>
<!-- And potentially many more icons -->
</defs>
</svg>
<div class="icon">
<svg width="1em" height="1em">
<use xlink:href="#save-icon"></use>
</svg>
</div>
Alternative 3
Working example
svg icons in blob: URLs.
<script>
const blob = new Blob([svg_content], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttribute('href', url + '#save-icon');
svg.appendChild(use);
document.body.appendChild(svg);
</script>