Implement embedSvg

apps/web/test19.html

@@ -248,21 +248,21 @@
         y: 0,
         size: 20,
       });
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         x: 100,
         y: 841 /* 
           width: 427 / 3,
           height: 769 / 3 */,
       });
-      await firstPage.drawSvg(svgPowerTwo, {
+      firstPage.drawSvg(svgPowerTwo, {
         x: 550,
         y: 841,
       });
-      await secondPage.drawSvg(svgDemo, {
+      secondPage.drawSvg(svgDemo, {
         x: 100,
         y: 841,
       });
-      await secondPage.drawSvg(scienceSvgs, {
+      secondPage.drawSvg(scienceSvgs, {
         x: 100,
         y: 500,
       });

apps/web/test20.html

@@ -138,11 +138,11 @@
         x: 100,
         y: 1000
       }); */
-      await firstPage.drawSvg(svg3, {
+      firstPage.drawSvg(svg3, {
         x: 100,
         y: 950,
       });
-      await firstPage.drawSvg(svg2, {
+      firstPage.drawSvg(svg2, {
         x: 100,
         y: 800,
       });

apps/web/test21.html

@@ -104,7 +104,7 @@
       drawLines(firstPage);
       drawLines(secondPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         x: 100,
         y: 800,
       });

apps/web/test22.html

@@ -179,7 +179,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 173.0060640625,
         width: 167.68455000000003,
         x: 100,

apps/web/test23.html

@@ -177,7 +177,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 595.28,
         width: 841.89,
         // height: 100,

apps/web/test24.html

@@ -171,7 +171,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 719,
         width: 611,
         // height: 100,

apps/web/test25.html

@@ -140,7 +140,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 602,
         width: 409,
         // height: 32,
@@ -149,21 +149,21 @@
         y: 700,
       });
 
-      // await firstPage.drawSvg(svg3, {
+      // firstPage.drawSvg(svg3, {
       //   height: 100,
       //   width: 100,
       //   x: 100,
       //   y: 700
       // })
 
-      // await firstPage.drawSvg(svg2, {
+      // firstPage.drawSvg(svg2, {
       //   height: 100,
       //   width: 100,
       //   x: 100,
       //   y: 500
       // })
 
-      // await firstPage.drawSvg(svg4, {
+      // firstPage.drawSvg(svg4, {
       //   height: 100,
       //   width: 100,
       //   x: 100,

apps/web/test26.html

@@ -145,7 +145,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 240.75,
         width: 249.75,
         x: 100,

apps/web/test27.html

@@ -321,21 +321,21 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 246.75,
         width: 231,
         x: 100,
         y: 700,
       });
 
-      await firstPage.drawSvg(cutArrowSvg, {
+      firstPage.drawSvg(cutArrowSvg, {
         height: 246.75,
         width: 231,
         x: 500,
         y: 700,
       });
 
-      await firstPage.drawSvg(simpleCutArrowSvg, {
+      firstPage.drawSvg(simpleCutArrowSvg, {
         height: 246.75,
         width: 231,
         x: 500,

apps/web/test28.html

@@ -227,7 +227,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 300,
         width: 400,
         x: 100,

apps/web/test29.html

@@ -32,7 +32,7 @@
     <iframe id="iframe"></iframe>
   </body>
 
-  <script type="text/javascript">
+  <script type="text/javascript" >
     // startFpsTracker('animation-target');
 
     const renderInIframe = (pdfBytes) => {
@@ -105,12 +105,23 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 100,
         width: 100,
         x: 100,
         y: 700,
       });
+
+      const svg2 = `<svg height="200" width="300">
+        <image width="300" height="200" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" />
+        </svg>`
+      const pdfSvg = await pdfDoc.embedSvg(svg2)
+      firstPage.drawSvg(pdfSvg, {
+        height: 200,
+        width: 300,
+        x: 500,
+        y: 700,
+      });
       firstPage.moveUp(600);
       firstPage.moveRight(100);
       firstPage.drawSvgPath(

src/api/PDFDocument.ts

@@ -1,3 +1,8 @@
+import {
+  parse as parseHtml,
+  HTMLElement,
+  NodeType,
+} from 'node-html-better-parser';
 import Embeddable from './Embeddable';
 import {
   EncryptedPDFError,
@@ -68,6 +73,7 @@ import PDFEmbeddedFile from './PDFEmbeddedFile';
 import PDFJavaScript from './PDFJavaScript';
 import JavaScriptEmbedder from '../core/embedders/JavaScriptEmbedder';
 import { CipherTransformFactory } from '../core/crypto';
+import PDFSvg from './PDFSvg';
 
 /**
  * Represents a PDF document.
@@ -1110,6 +1116,28 @@ export default class PDFDocument {
     return pdfImage;
   }
 
+  async embedSvg(svg: string): Promise<PDFSvg> {
+    if (!svg) return new PDFSvg(svg)
+    const parsedSvg = parseHtml(svg)
+    const findImages = (element: HTMLElement): HTMLElement[] => {
+      if (element.tagName === 'image') return [element]
+      else return element.childNodes.map(child => child.nodeType === NodeType.ELEMENT_NODE ? findImages(child): []).flat()
+    }
+    const images = findImages(parsedSvg)
+    const imagesDict = {} as Record<string, PDFImage>
+
+    await Promise.all(
+      images.map(async image => {
+        const href = image.attributes.href
+        if (!href || imagesDict[href]) return
+        const isPng = href.match(/\.png(\?|$)|^data:image\/png;base64/gim)
+        const pdfImage = isPng ? await this.embedPng(href) : await this.embedJpg(href)
+        imagesDict[href] = pdfImage
+      })
+    )
+
+    return new PDFSvg(svg, imagesDict)
+  }
   /**
    * Embed one or more PDF pages into this document.
    *

src/api/PDFPage.ts

@@ -20,6 +20,7 @@ import PDFDocument from './PDFDocument';
 import PDFEmbeddedPage from './PDFEmbeddedPage';
 import PDFFont from './PDFFont';
 import PDFImage from './PDFImage';
+import PDFSvg from './PDFSvg';
 import {
   PDFPageDrawCircleOptions,
   PDFPageDrawEllipseOptions,
@@ -57,7 +58,7 @@ import {
   assertRangeOrUndefined,
   assertIsOneOfOrUndefined,
 } from '../utils';
-import { drawSvg, drawSvgSync } from './svg';
+import { drawSvg } from './svg';
 
 /**
  * Represents a single page of a [[PDFDocument]].
@@ -1585,43 +1586,22 @@ export default class PDFPage {
    * @param svg The SVG to be drawn.
    * @param options The options to be used when drawing the SVG.
    */
-  async drawSvg(
-    svg: string,
-    options: PDFPageDrawSVGElementOptions = {},
-  ): Promise<void> {
-    assertIs(svg, 'svg', ['string']);
-    assertOrUndefined(options.x, 'options.x', ['number']);
-    assertOrUndefined(options.y, 'options.y', ['number']);
-    assertOrUndefined(options.width, 'options.width', ['number']);
-    assertOrUndefined(options.height, 'options.height', ['number']);
-
-    await drawSvg(this, svg, {
-      x: options.x ?? this.x,
-      y: options.y ?? this.y,
-      fonts: options.fonts,
-      width: options.width,
-      height: options.height,
-    });
-  }
-
-  drawSvgSync(
-    svg: string,
+  drawSvg(
+    svg: PDFSvg | string,
     options: PDFPageDrawSVGElementOptions = {},
   ): void {
-    assertIs(svg, 'svg', ['string']);
+    assertIs(svg, 'svg', ['string', [PDFSvg, 'PDFSvg']]);
     assertOrUndefined(options.x, 'options.x', ['number']);
     assertOrUndefined(options.y, 'options.y', ['number']);
     assertOrUndefined(options.width, 'options.width', ['number']);
     assertOrUndefined(options.height, 'options.height', ['number']);
-    assertOrUndefined(options.images, 'options.images', [[PDFImage, 'PDFImage']])
 
-    drawSvgSync(this, svg, {
+    drawSvg(this, svg, {
       x: options.x ?? this.x,
       y: options.y ?? this.y,
       fonts: options.fonts,
       width: options.width,
       height: options.height,
-      images: options.images
     });
   }
 

src/api/PDFPageOptions.ts

@@ -3,7 +3,6 @@ import PDFFont from './PDFFont';
 import { Rotation } from './rotations';
 import { FillRule, LineCapStyle, TextRenderingMode } from './operators';
 import type { Space, TransformationMatrix } from '../types';
-import PDFImage from './PDFImage';
 
 interface SvgOptions {
   matrix?: TransformationMatrix;
@@ -175,5 +174,4 @@ export interface PDFPageDrawSVGElementOptions {
   height?: number;
   fontSize?: number;
   fonts?: { [fontName: string]: PDFFont };
-  images?: Record<string, PDFImage>
 }

src/api/PDFSvg.ts

@@ -0,0 +1,10 @@
+import PDFImage from "./PDFImage";
+
+export default class PDFSvg {
+    svg: string
+    images: Record<string, PDFImage>
+    constructor(svg: string, images: Record<string, PDFImage> = {}) {
+        this.svg = svg
+        this.images = images
+    }
+}

src/api/index.ts

@@ -18,3 +18,4 @@ export { default as PDFPage } from './PDFPage';
 export { default as PDFEmbeddedPage } from './PDFEmbeddedPage';
 export { default as PDFJavaScript } from './PDFJavaScript';
 export { default as Embeddable } from './Embeddable';
+export { default as PDFSvg } from './PDFSvg'