Embed images with SVG

[Leo-Nicolle]

Describe the bug
tags with an href pointing to a SVG file are not displayed correctly

What version are you using (exact version of and jspdf)?
- jspdf: 2.5.1
- svg2pdf.js: 2.2.3

To Reproduce

1. Test SVG:

<svg
      width="128"
      height="64"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      style="user-select: none"
    >
      <rect x="0" y="0" width="128" height="64" stroke="black" fill="none" />
      <image
        width="64"
        height="64"
        x="0"
        y="0"
        href="https://upload.wikimedia.org/wikipedia/commons/1/16/Cellular_phone.svg"
      />
      <image
        width="64"
        height="64"
        x="64"
        y="0"
        href="https://upload.wikimedia.org/wikipedia/commons/a/a0/Goldfish-47022_1280.png"
      />
</svg>

Code:

import { jsPDF } from "jspdf";
import "svg2pdf.js";
const svg = document.querySelector("svg");
const doc = new jsPDF({ format: "a4", unit: "pt" });
doc.svg(svg, { x: 0, y: 0, width: 128, height: 64 }).then((doc) => {
  doc.save("doc.pdf");
});

3. I get a square with the PNG image but not the SVG

Example Sandbox

Expected behavior
The SVG image should be drawn

Screenshots
Input SVG:

Output PDF:

Desktop (please complete the following information):

• OS: Ubuntu
• Browser Chromium
• Version 125.0.6422.26

[HackbrettXXX]

Thank you for the bug report. It appears the SVG image is part of the exported PDF but is at the wrong location. Could you provide an example with an image tag linking a much simpler SVG that still reproduces the issue?

[Leo-Nicolle]

Sure ! Here it is !

[HackbrettXXX]

Thanks. I could not reproduce the issue with the sandbox, though. There is a bug in your code:

const svg = document.querySelector("svg");

should be

const svg = document.querySelector("#toexport");

Otherwise, we're just exporting the first SVG. After I fixed it, the exported PDF looks fine.

[Leo-Nicolle]

Hi ! Sorry for the mistake, I might have rushed the second example a little.
So I rewinded the tape, copy/pasted the cellphone SVG, and added a shape on the top left corner of it, and TADAA! Both SVG are actually exported, they are just not at the same scale as in the browser.
So here is a (working + reproducing the bug) example

On the browser

The SVG to export scales down the second SVG so that it fits within the view

On the exported PDF:

Both SVGs are rendered in their original scale, and cropped within the view.

[HackbrettXXX]

Thank you. I can reproduce it now. It seems like this is an issue with the viewbox transformation being applied incorrectly. If I add a viewBox attribute to the referenced image, the result is correct. I suspect the fallback case here is wrong:

svg2pdf.js/src/nodes/svg.ts

Lines 71 to 83 in 2682632

	const x = this.getX(context)
	const y = this.getY(context)
	const viewBox = this.getViewBox()
	let nodeTransform
	if (viewBox) {
	const width = this.getWidth(context)
	const height = this.getHeight(context)
	nodeTransform = computeViewBoxTransform(this.element, viewBox, x, y, width, height, context)
	} else {
	nodeTransform = context.pdf.Matrix(1, 0, 0, 1, x, y)
	}
	return nodeTransform

I'm not sure what the expected behavior is if no viewBox attribute is provided. I couldn't find much on a quick scan through the SVG spec.

I'll accept a pull request for this issue. A workaround for now might be to always set the viewBox attribute.