title: Base64 SVG images
body: <p>I cannot get a base64 data URI for and SVG to appear as an image.</p>
  
  <p>I tried an <code>&lt;img&gt;</code> and a <code>&lt;canvas&gt;</code> and for neither one does the SVG show up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var url = 'data:image/svg+xml;base64,' + btoa('&lt;svg height="100" width="100"&gt;&lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/&gt;&lt;/svg&gt;');
  
  document.getElementById('image').src = url;
  
  var context = document.getElementById('canvas').getContext('2d');
  var image = new Image();
  image.src = url;
  context.drawImage(image, 0, 0);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas, img {
      border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="image" width="200" height="200"&gt;
  
  &lt;canvas id="canvas" width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Tested in Chrome and Firefox.</p>
  
  <p>What doesn't the SVG show up?</p>