<p>The test SVG file:</p>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,10 H90 L50,70"/><text y="90">" ' # % &amp; ¿ 🔣</text></svg>

<xmp><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,10 H90 L50,70"/><text y="90">" ' # % &amp; ¿ 🔣</text></svg></xmp>

<hr>

<p>base64 encoded (298 bytes). Works everywhere, but is ugly, opaque, and kind of bloated.</p>

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAsMTAgSDkwIEw1MCw3MCIvPjx0ZXh0IHk9IjkwIj4iICcgIyAlICZhbXA7IMK/IPCflKM8L3RleHQ+PC9zdmc+" alt="">

<xmp>data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAsMTAgSDkwIEw1MCw3MCIvPjx0ZXh0IHk9IjkwIj4iICcgIyAlICZhbXA7IMK/IPCflKM8L3RleHQ+PC9zdmc+</xmp>

<hr>

<p>Wholly URL-encoded. Works everywhere, but bloated.</p>

<img src='data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M10%2C10%20H90%20L50%2C70%22%2F%3E%3Ctext%20y%3D%2290%22%3E%22%20%27%20%23%20%25%20%26amp%3B%20%C2%BF%20%F0%9F%94%A3%3C%2Ftext%3E%3C%2Fsvg%3E' alt="">

<xmp>data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M10%2C10%20H90%20L50%2C70%22%2F%3E%3Ctext%20y%3D%2290%22%3E%22%20%27%20%23%20%25%20%26amp%3B%20%C2%BF%20%F0%9F%94%A3%3C%2Ftext%3E%3C%2Fsvg%3E</xmp>

<hr>

<p>Unescaped. Doesn’t work anywhere.</p>

<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,10 H90 L50,70"/><text y="90">" &apos; # % &amp; ¿ 🔣</text></svg>' alt="">

<xmp>data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M10,10 H90 L50,70"/><text y="90">" ' # % &amp; ¿ 🔣</text></svg></xmp>
  
<hr>

<p><code>"</code> swapped with <code>'</code>. No change in browser support, but we don’t have to URL-encode <code>'</code>, leading to…</p>

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10,10 H90 L50,70'/><text y='90'>' &apos; # % &amp; ¿ 🔣</text></svg>" alt="">

<xmp>data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10,10 H90 L50,70'/><text y='90'>' &apos; # % &amp; ¿ 🔣</text></svg></xmp>

<hr>

<p><code>"</code> swapped with <code>'</code>, and <code>&lt;</code>, <code>></code>, <code>&amp;</code>, <code>%</code>, <code>#</code>, and non-ASCII characters URL-encoded. Works everywhere and is tiny to boot!</p>

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M10,10 H90 L50,70'/%3e%3ctext y='90'%3e' %26apos; %23 %25 %26amp; %c2%bf %f0%9f%94%a3%3c/text%3e%3c/svg%3e" alt="">

<xmp>data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M10,10 H90 L50,70'/%3e%3ctext y='90'%3e' %26apos; %23 %25 %26amp; %c2%bf %f0%9f%94%a3%3c/text%3e%3c/svg%3e</xmp>

<hr>

<p>And finally, a test to see if <code>charset</code> can omit escaping bytes outside the ASCII range:</p>

<img src="data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M10,10 H90 L50,70'/%3e%3ctext y='90'%3e' %26apos; %23 %25 %26amp; ¿ 🔣%3c/text%3e%3c/svg%3e" alt="">

<xmp>data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3e%3cpath d='M10,10 H90 L50,70'/%3e%3ctext y='90'%3e' %26apos; %23 %25 %26amp; ¿ 🔣%3c/text%3e%3c/svg%3e</xmp>