<p dir="auto">A component in 2.0.0-alpha.45 with</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="template: `&lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 100 100&quot;&gt;&lt;/svg&gt;`"><pre class="notranslate"><code class="notranslate">template: `&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"&gt;&lt;/svg&gt;`
</code></pre></div>
<p dir="auto">arrives in the DOM as</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewbox=&quot;0 0 100 100&quot; version=&quot;1.1&quot;&gt;&lt;/svg&gt;"><pre class="notranslate"><code class="notranslate">&lt;svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" version="1.1"&gt;&lt;/svg&gt;
</code></pre></div>
<p dir="auto">Note the lower-case <code class="notranslate">b</code> of <code class="notranslate">viewbox</code>. That way, the SVG doesn't render correctly.</p>
<p dir="auto">As a workaround, I'm using an <code class="notranslate">ElementRef</code> in the constructor to manually set the correct property.</p>
<p dir="auto">SVG elements inside templates are not visible with alpha.38. From what I can see, the browser is not recognizing the svg element.</p>
<p dir="auto">Works in alpha.37: <a href="http://plnkr.co/edit/GOEp4DSa0Q3HGZGxXVAi" rel="nofollow">http://plnkr.co/edit/GOEp4DSa0Q3HGZGxXVAi</a><br>
Breaks in alpha.38: <a href="http://plnkr.co/edit/thIhnOB9zhzIQeEnmZUA" rel="nofollow">http://plnkr.co/edit/thIhnOB9zhzIQeEnmZUA</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import {bootstrap, bind, Component, View} from 'angular2/angular2';

@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    &lt;div&gt;
      &lt;svg fill=&quot;000000&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
        &lt;path d=&quot;M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z&quot;&gt;&lt;/path&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  `
})
class App {
  constructor() {}
}

bootstrap(App);"><pre class="notranslate"><code class="notranslate">import {bootstrap, bind, Component, View} from 'angular2/angular2';

@Component({
  selector: 'app-cmp'
})
@View({
  template: `
    &lt;div&gt;
      &lt;svg fill="000000" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"&gt;&lt;/path&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  `
})
class App {
  constructor() {}
}

bootstrap(App);
</code></pre></div>