title: How to decode a base64 SVG file and use it as a Angular template?
body: <p>I would like to convert a base64 encoded SVG image into an Angular template with the extension .svg, for example my-template.component.svg.</p>
  <p>I get the base64 encoded svg through an API call in the following form:</p>
  <pre><code>data:image/svg+xml;base64,PHN2ZyBpZD0iREVWSUNFX01BUF8tX09wZW5lZF9jb3B5IiBkYXRhLW5...
  </code></pre>
  <p>This should become a normal SVG file, which I would like to use as a template. So the content of <code>my-template.component.svg</code> should look like this:</p>
  <pre><code>&lt;svg width = &quot;100&quot; height = &quot;100&quot;&gt;
     &lt;circle cx = &quot;50&quot; cy = &quot;50&quot; r = &quot;40&quot; stroke = &quot;green&quot; stroke-width = &quot;4&quot; fill = &quot;yellow&quot; /&gt;
     ...
  &lt;/svg&gt;
  </code></pre>
  <p>Otherwise I cannot manipulate the base64 encoded SVG with CSS, since the selectors are not available in the DOM.</p>
  <p>Currently the returned value from the API call is used like this:</p>
  <pre><code>&lt;img id =&quot;img&quot; [src]=&quot;api-url +'/path/to/svg/file.svg'&quot; /&gt;
  </code></pre>
  <p>So the src attribute of the img tag becomes:</p>
  <pre><code>&lt;img id=&quot;img&quot; src=&quot;data:image/svg+xml;base64,PHN2ZyBpZD0iREVWSUNFX01BUF8tX09wZW5lZF9jb3B5IiBkYXRhLW5...&quot; /&gt;
  </code></pre>