title: How do I use an <svg> tag when all I have is a base64 string for the image?
body: <p>I would like to show an SVG image. I want to use CSS to modify the SVG directly, so I need to use an <code>&lt;svg&gt;</code> tag. However, I don't have the SVG source - all I have is the SVG encoded as a base64 string. In my HTML page, with an image tag, it looks something like this:</p>
  
  <pre><code>&lt;img alt="" src="data:image/svg+xml;base64,lotsofunreadablestuff..."&gt;
  </code></pre>
  
  <p>How can I create an <code>svg</code> tag those shows the same image using the same base64 string? Every thread and piece of documentation I've found so far seems to assume that I'm either using the <code>&lt;use xlink:href=...&gt;&lt;/use&gt;</code> tag in my SVG or including my raw SVG inside my <code>&lt;svg&gt;</code> tags, neither of which apply in my situation.</p>
  
  <p>I want to do something like this:</p>
  
  <pre><code>&lt;svg&gt;
    &lt;magicalSourceTag&gt;
      data:image/svg+xml;base64,lotsofunreadablestuff...
    &lt;/magicalSourceTag&gt;
  &lt;/svg&gt;
  </code></pre>