D-Net

import {Directive, ElementRef, Input, OnInit, Renderer2} from "@angular/core";

@Directive({

  selector: '[svg-background]',

})

export class SvgBackgroundDirective implements OnInit{

  @Input()

  private color: string;

  @Input()

  private svg: string;

  @Input()

  private svgColor: string;

  @Input()

  private position: string = null;

  private readonly element: any;

  constructor(private elementRef: ElementRef,

              private renderer: Renderer2,) {

    this.element = this.elementRef.nativeElement;

  }

  ngOnInit() {

    let svg = this.encodeSvg();

   if(this.position && svg) {

     this.renderer.setStyle(this.element, 'background', "url(" + svg + ") " + (this.color?this.color + " ":"") + "no-repeat " + this.position);

   }

  }

  private encodeSvg(): string {

    if(this.svg && this.svgColor) {

      return 'data:image/svg+xml,' + encodeURIComponent(this.svg.replace('{{color}}', this.svgColor));

    }

    return null;

  }

}