<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Currently when I have and SVG in the HTML of an Angular 2 page it does not render responsively (Width of container and resize with container).</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">When I add an SVG to the HTML using ngOnInit it behaves correctly.  The SVG is full width and resizes with the window.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
I created the following plunkr that displays the non responsive SVG as well as the dynamically added SVG that is responsive.<br>
<a href="https://plnkr.co/edit/yvcO7C6O3nRGNowQPmAA?p=preview" rel="nofollow">https://plnkr.co/edit/yvcO7C6O3nRGNowQPmAA?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I would like to be able to have the SVG in the HTML so I can have a declarative way for binding information in the SVG to the Angular Module.  This was possible in Angular 1.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
I first experienced this issue in an Ionic 2 application but have been able to duplicate it in a plnkr.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-beta.17</li>
<li><strong>Browser:</strong><br>
Chrome Version 52.0.2743.116 (64-bit), 53.0.2785.101 (64-bit) | Firefox 36.0.1, 47.0, 48.0.2 | Safari Version 9.1.3 (11601.7.8) |</li>
<li><strong>Language:</strong><br>
TypeScript</li>
</ul>
<p dir="auto">Most developer workflows are based around CJS (Browserify or WebPack) and not System.js. Since System.js can consume cjs bundles, I suggest we replace our System.register bundle with a CJS bundle. In this case, developers that use Browserify or WebPack will be able to use it, and it should still work with System.</p>
<p dir="auto">Notes:</p>
<ul dir="auto">
<li>System.register has a lot of overhead comparing to CJS. My naive measurements showed the difference is about 18%.</li>
<li>When using a CJS bundle, you cannot important submodudles, only "angular2/angular2". I think this is an advantage cause it prevents users from depending on private API.</li>
</ul>
<p dir="auto">Finally, once we produce a CJS bundle, I think we should change our Getting Started guide to use WebPack instead of System.js. The reason is WebPack provides a lot better experience out of the box (including TypeScript and Babel).</p>
<p dir="auto">The WebPack config for an Angular 2 project written with TypeScript is about 10 lines long:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  resolve: {
    root: __dirname,
    extensions: ['.ts', '.js']
  },
  entry: [&quot;webpackapp&quot;],
  output: {filename: &quot;webappapp_bundle.js&quot;},
  externals: {'angular2/angular2': &quot;angular2&quot;},
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  resolve: {
    root: __dirname,
    extensions: ['.ts', '.js']
  },
  entry: ["webpackapp"],
  output: {filename: "webappapp_bundle.js"},
  externals: {'angular2/angular2': "angular2"},
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}
</code></pre></div>
<p dir="auto">You get source maps, dev server with live reload, production/dev modes -- a very good first impression and a clear path to production setting.</p>
<p dir="auto">/cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/IgorMinar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/IgorMinar">@IgorMinar</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/rkirov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/rkirov">@rkirov</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/jeffbcross/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jeffbcross">@jeffbcross</a></p>