angularangular-renderer2

Rendering SVGs using Renderer2 in Angular

How do I render an SVG (which I have locally stored in my project) using Renderer2 in Angular?

I tried doing it like following:

const div = this.renderer.createElement('div');
const svg = this.renderer.createText('<svg>{....}</svg>');
this.renderer.appendChild(div, svg);

But it actually got renderer as a text.

Can someone help?

Solution

  • The createText method is used to create a text node, in this case you can set innerHTML directly.

    const div = this.renderer.createElement('div');
div.innerHTML = svgStr;