CODEWITHSUNDEEP
angularsvg
punov
punov

Reputation: 828

Svg isn't rendered inside the Angular2 app

I've found that a simply pasted SVG inside an angular2 application isn't being rendered.

I have this code in index.html:

<body>
  <p>SVG outside the application:</p>
  <svg  xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"
          style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <app>Loading...</app>

  <!-- inject:js -->
  <!-- endinject -->

  <script>
    System.import('bootstrap')
      .catch(function (e) {
        console.error(e,
          'Report this error at https://github.com/mgechev/angular2-seed/issues');
      });
  </script>

</body>

and this simple code inside app.html:

<p>SVG inside the application:</p>
<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
</svg>

This example is built with angular2-seed application, and my question is: What is the reason for problems rendering the simple svg (not directive, not some kind of interpolation etc) inside the application? Is it an angular DOM manipulation problem or something else? And how can I fix it?

P.S. Of course, firstly, I planned to build an 'svg-icon' directive and use it to render different kinds of SVG icons using the type attribute. But the render failed and then I came up to this simple code.

Example you can see here because unfortunately I can't yet build an angular2 example with fiddle or plunker.

Upvotes: 1

Views: 1058

Answers (1)

Ankit Singh
Ankit Singh

Reputation: 24945

2.0.0-alpha.46 (2015-11-11) solved the problem (see changelog). Since then it's working fine.

plnkr.

Upvotes: 2

Related Questions