Embedding an SVG

[sdraper69]

Unless I am missing something there doesn't seem to be a way of embedding an SVG file into my document I was expecting something like pdfDoc.embedSVG(svg)?

[bcholmes]

I think that the only support for SVG is that it uses the SVG path format when you're drawing lines/shapes. Things like fill and stroke properties need to be specified using the pdf-lib API (which is not too dissimilar to SVG, but is not based on SVG). It doesn't support other SVG instructions, so embedding a whole SVG file probably isn't going to work.

[taxilian]

I have begun porting a library which was built for jspdf to work with pdf-lib ; there is still a fair bit to figure out, but I have a good start on it I think.

https://github.com/HamStudy/svg2pdf.js

I'd welcome any help -- @Hopding there are probably going to be a few things with fonts and/or patterns that I may need help figuring out, if nothing else. I've been meaning to get back to this for awhile but just haven't had time until now.

[taxilian]

After wasting way too much time on that, I don't feel that it's a good option for this, so I've fallen back to my previous plan which is to port SVG-to-PDFKit.

https://github.com/HamStudy/svgToPdf

I've ported it from javascript to typescript and verified that things are working; next step is to abstract all PDF operations into a separate interface and then I'll need to implement it using pdf-lib. The good news is that if I can do it right then it should be possible to make adapters to work with other PDF libraries as well.

@Hopding is there an example somewhere that could show me how to create a XObject and then do all my drawing to that? One of the things that this library does is every time there is a "container" type in the SVG it creates it as an XObject which makes things like clipping, etc much easier. Since PDFKit doesn't support that directly they "fake out" the PDFPage so that all page operations will go in the XObject. Here is the code used:

  docBeginGroup(bbox: PDFKit.PDFKitBox) {
    const {doc} = this;
    let group = new PDFGroup();
    group.name = 'G' + (doc._groupCount = (doc._groupCount || 0) + 1);
    group.resources = doc.ref({});
    group.xobj = doc.ref({
      Type: 'XObject',
      Subtype: 'Form',
      FormType: 1,
      BBox: bbox,
      Group: {S: 'Transparency', CS: 'DeviceRGB', I: true, K: false},
      Resources: group.resources
    });
    group.xobj.write('');
    group.savedMatrix = doc._ctm;
    group.savedPage = doc.page;
    this.groupStack.push(group);
    doc._ctm = [1, 0, 0, 1, 0, 0];
    doc.page = {
      width: doc.page.width, height: doc.page.height,
      write: function(data: any) {group.xobj.write(data);},
      fonts: {}, xobjects: {}, ext_gstates: {}, patterns: {},
      document: doc,
      size: doc.page.size,
      layout: doc.page.layout,
    } as any;
    const groupSymbol = Symbol(group.name);
    this.groupMap[groupSymbol] = group;
    return groupSymbol;
  }

I am sure I can figure it out, but if you have any examples that'd really help... I'm in a bit over my head on several things in this port.

[ReallyVirtual]

I needed to embed a rather complicated svg image into a pdf using pdf-lib, so adding that many paths was not an option.
I ended up exporting the svg as pdf (in inkscape) and using embedPdf afterwards, which was sufficient to accomplish my goal.

[taxilian]

I ended up doing the same thing for mine

…

On Fri, Sep 29, 2023 at 6:10 PM Sohaib Athar ***@***.***> wrote: I needed to embed a rather complicated svg image into a pdf using pdf-lib, so adding that many paths was not an option. I ended up exporting the svg as pdf (in inkscape) and using embedPdf afterwards, which was sufficient to accomplish my goal. — Reply to this email directly, view it on GitHub <#1165 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABWYTRGZD6JCDSJX2FLU3LX45PO5ANCNFSM5OUFLMCA> . You are receiving this because you commented.Message ID: ***@***.***>