CODEWITHSUNDEEP
angularsvgionic-frameworkionic2
Sébastien D.
Sébastien D.

Reputation: 43

How to append SVG with Angular and Ionic 2

I develop an application using Ionic 2 (TS). I have a method that calls an API to return an image in SVG format. I tried to integrate it on my page using the binding but it shows me the svg code of my image.

In order for the code to be interpreted and correctly integrated I think that we must use an Append() method.

How to use append to typeScript properly. I try like that but it does not work:

<div class="svg" [innerHtml]="svgPicture"></div>

And in TS :

svgCard: string = `svg code`

But this not work. I have a blank block.

Thanks for you help,

Upvotes: 2

Views: 432

Answers (1)

Shane
Shane

Reputation: 3199

Angular wants to protect from XSS, so the SVG has to be sanitized before it can be appended to to DOM for security reasons. You can use a Pipe to sanitize the content you're trying to dynamically append to the DOM.

See this plunkr for an working example.

Another thing to note is that Angular can see traditional SVG as plain HTML when used in the template. In order to use the child tags of an SVG (e.g. polygon) the child should be prepended with an indicator that it is part of a SVG template.

The following template...

<svg height="200" width="200">
  <polygon points="200,0 200,200 0,200" style="fill:#fff;stroke:#000;stroke-width:1" />
</svg>

...would become...

<svg height="200" width="200">
  <svg:polygon points="200,0 200,200 0,200" style="fill:#fff;stroke:#000;stroke-width:1" />
</svg>

...in Angular. But you can not run that through a Pipe.

Upvotes: 1

Related Questions