Migrate away from data URLs in SVG element

Jun Kokatsu
Jun Kokatsu
X

The SVG spec was recently updated to remove support for data: URLs in SVG <use> element. This improves security of the Web platform as well as compatibility between browsers as Webkit does not support data: URLs in SVG <use> element.

Reason for the removal

SVG <use> element can fetch external SVG images and clone it into the current document. This is a powerful capability, and therefore it is restricted to same-origin SVG images. However, data: URLs are treated as same-origin resources which caused several security bugs, such as bypasses of Trusted Types and Sanitizer API. These security bugs led to a discussion of the best approach to resolve them. And we came to a consensus among browser vendors (from Mozilla and Apple) that the best way forward is to remove support for data: URLs in SVG <use> element.

For sites which use data: URLs in SVG <use> element, there are several alternatives.

Use same-origin SVG images

You can load same-origin SVG images using <use> element.

<div class=">ico<n"
  svg width="1e>m&quo<t; height="1em"
    use xlink><:hre>f=&<quot>;<svgi>cons.svg#user-icon"/use
  /svg
/div

Use inline SVG images

You can reference inline SVG images using <use> element.

<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=>&qu<ot;h>ttp:/</www.w3.org/1999/xlink"
  defs
    s>ymbol i<d="user-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.39>1-8.7<91 9.83>5-8.7<91 13.095h32c0-3.231-3.467-10.675-8.79>7-1<3.092>z<&quo>t;<
    /symbol
   > !-<- And potentially many more >icons< --
  /defs
/svg

div class><=&qu>ot;<icon>&<quot>;
  svg width="1em" height="1em"
    use xlink:href="#user-icon"/use
  /svg
/div

Use SVG images with blob: URLs

If you don't have control over a page's HTML or same-origin resources (such as JavaScript libraries), you can load SVG images using blob: URLs in <use> element.

const svg_content = `<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=>"<;htt>p://www<.w3.org/1999/xlink"
    defs
      s>ymbol id=<"user-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.39>1-8.791< 9.835->8.791 1<3.095h32c0-3.231-3.467-10.675-8.797-13>.092z<">;
 <    > /symbol
      !-- And potentially many more icons --
    /defs
  /svg`;
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 + '#user-icon');
svg.appendChild(use);
document.body.appendChild(svg);

Live examples

You can find live examples for these alternatives on GitHub.