addSvgAsImage method does not display svg image with Angular 8

[Maxime-Aubry-Econocom]

Hello.

I try to add a svg image into my pdf.
here is the code :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { jsPDF } from 'jspdf';

@Injectable({
  providedIn: 'root'
})
export class GeneratePdfService {
  doc: jsPDF;

  constructor(
    private http: HttpClient
  ) {
    this.doc = new jsPDF('p', 'pt', 'a4');
  }

  async generate(): Promise<void> {
    await this._addHeader();
    await this._addBody();
    this.doc.save('test.pdf');
  }

  async _addHeader(): Promise<void> {
    // let logo: string = await this.http.get('../../../../assets/images/building-flat-shadow.svg', { responseType: 'text' }).toPromise();
    let logo:string = '<svg xmlns="http://www.w3.org/2000/svg" width="66" height="48" viewBox="0 0 66 48">'+
// ...
    '</svg>';
    this.doc.addSvgAsImage(logo, 20, 20, 66, 48, '', false);
  }

  async _addBody(): Promise<void> {
    
  }
}

I get an error message :
Cannot read property 'fromString' of undefined

And svg image is not in the saved pdf.
Could you help me please ?
Thanks.

[HackbrettXXX]

Yes, this is a known issue and was fixed with #2981. There will be a new release in the next couple of weeks.

[doox911-opensource]

Yes, this is a known issue and was fixed with #2981. There will be a new release in the next couple of weeks.

My svg:

<svg width="234px" height="74px" x="0px" y="0px" viewBox="0 0 234 74" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="234" height="74" style="fill:#ffffff;"/><g transform="translate(10, 10)" style="fill:#000000;"><text style="font: 12px monospace" text-anchor="start" x="0" y="54">2</text></g><g transform="translate(34, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g><g transform="translate(40, 10)" style="fill:#000000;"><rect x="6" y="0" width="2" height="40"/><rect x="10" y="0" width="4" height="40"/><rect x="20" y="0" width="2" height="40"/><rect x="24" y="0" width="4" height="40"/><rect x="30" y="0" width="2" height="40"/><rect x="36" y="0" width="6" height="40"/><rect x="44" y="0" width="2" height="40"/><rect x="50" y="0" width="6" height="40"/><rect x="62" y="0" width="4" height="40"/><rect x="68" y="0" width="2" height="40"/><rect x="72" y="0" width="2" height="40"/><rect x="78" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">990000</text></g><g transform="translate(124, 10)" style="fill:#000000;"><rect x="2" y="0" width="2" height="48"/><rect x="6" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="5" y="62"></text></g><g transform="translate(134, 10)" style="fill:#000000;"><rect x="0" y="0" width="6" height="40"/><rect x="10" y="0" width="2" height="40"/><rect x="14" y="0" width="6" height="40"/><rect x="24" y="0" width="2" height="40"/><rect x="28" y="0" width="4" height="40"/><rect x="36" y="0" width="4" height="40"/><rect x="42" y="0" width="4" height="40"/><rect x="50" y="0" width="4" height="40"/><rect x="56" y="0" width="4" height="40"/><rect x="64" y="0" width="4" height="40"/><rect x="70" y="0" width="2" height="40"/><rect x="76" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">001115</text></g><g transform="translate(218, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g></svg>

    const pdf = new JsPDF('l', 'mm', [98, 150]);
    pdf.addFont('Roboto-Medium-normal.ttf', 'Roboto-Medium', 'normal');
    pdf.setFont('Roboto-Medium');

    pdf.setFontSize(14);

    pdf.addSvgAsImage(svg, 1, 1, 100, 100, '', false);

    pdf.save('label.pdf');

But I can't see the svg in the pdf?

[HackbrettXXX]

@finexfloors please test if Canvg standalone produces a good result for this SVG.

[mohanprovab]

How can i add above image jsPDF ?

[sayeedofficial]

Yes, this is a known issue and was fixed with #2981. There will be a new release in the next couple of weeks.

My svg:

<svg width="234px" height="74px" x="0px" y="0px" viewBox="0 0 234 74" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)"><rect x="0" y="0" width="234" height="74" style="fill:#ffffff;"/><g transform="translate(10, 10)" style="fill:#000000;"><text style="font: 12px monospace" text-anchor="start" x="0" y="54">2</text></g><g transform="translate(34, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g><g transform="translate(40, 10)" style="fill:#000000;"><rect x="6" y="0" width="2" height="40"/><rect x="10" y="0" width="4" height="40"/><rect x="20" y="0" width="2" height="40"/><rect x="24" y="0" width="4" height="40"/><rect x="30" y="0" width="2" height="40"/><rect x="36" y="0" width="6" height="40"/><rect x="44" y="0" width="2" height="40"/><rect x="50" y="0" width="6" height="40"/><rect x="62" y="0" width="4" height="40"/><rect x="68" y="0" width="2" height="40"/><rect x="72" y="0" width="2" height="40"/><rect x="78" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">990000</text></g><g transform="translate(124, 10)" style="fill:#000000;"><rect x="2" y="0" width="2" height="48"/><rect x="6" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="5" y="62"></text></g><g transform="translate(134, 10)" style="fill:#000000;"><rect x="0" y="0" width="6" height="40"/><rect x="10" y="0" width="2" height="40"/><rect x="14" y="0" width="6" height="40"/><rect x="24" y="0" width="2" height="40"/><rect x="28" y="0" width="4" height="40"/><rect x="36" y="0" width="4" height="40"/><rect x="42" y="0" width="4" height="40"/><rect x="50" y="0" width="4" height="40"/><rect x="56" y="0" width="4" height="40"/><rect x="64" y="0" width="4" height="40"/><rect x="70" y="0" width="2" height="40"/><rect x="76" y="0" width="6" height="40"/><text style="font: 12px monospace" text-anchor="middle" x="42" y="54">001115</text></g><g transform="translate(218, 10)" style="fill:#000000;"><rect x="0" y="0" width="2" height="48"/><rect x="4" y="0" width="2" height="48"/><text style="font: 12px monospace" text-anchor="middle" x="3" y="62"></text></g></svg>

    const pdf = new JsPDF('l', 'mm', [98, 150]);
    pdf.addFont('Roboto-Medium-normal.ttf', 'Roboto-Medium', 'normal');
    pdf.setFont('Roboto-Medium');

    pdf.setFontSize(14);

    pdf.addSvgAsImage(svg, 1, 1, 100, 100, '', false);

    pdf.save('label.pdf');

But I can't see the svg in the pdf?

i am facing the same issue,please can you tell how to insert this svg inside the pdf

[dennisideaonce]

Same issue!

[s1davide]

Same issue!

[RostVY]

There's the issue that addSvgAsImage() is asynchronous. The code from this method:

    ...
    var doc = this;
    return loadCanvg().then(function (canvg) {
      return canvg.fromString(ctx, svg, options);
    }, function () {
      return Promise.reject(new Error("Could not load canvg."));
    }).then(function (instance) {
      return instance.render(options);
    }).then(function () {
      doc.addImage(canvas.toDataURL("image/jpeg", 1.0), x, y, w, h, compression, rotation);
    });

and when I do something like

doc.addSvgAsImage(imgData, 20, 50, 17, 20 );
doc.save('filename');

save() method is executed earlier than doc.addImage(...)

It worked for me when I put doc.save() into small setTimeout().
The other solution would be to convert SVG to JPEG and use addImage() method instead of addSvgAsImage().