pdfme-svg

A pdfME plugin that renders SVG content inside PDF templates.

Fork note

This codebase is mainly a fork of github.com/yWorks/svg2pdf.js. The only repository-specific modifications are the jsPDF shim (src/jspdf-shim.ts) and the pdfME plugin wrapper (src/index.ts). Other changes include improving svg2pdf's handling of SVGs, which may be contributed to upstream.

Install

npm install @hadi77ir/pdfme-svg @pdfme/common @pdfme/pdf-lib

Build

This package ships its compiled output in dist/.

npm run build

Usage with pdfME

Register the plugin under the svg type and pass SVG strings as field values.

import { generate } from '@pdfme/generator';
import createSvgPlugin from '@hadi77ir/pdfme-svg';

const template = {
  basePdf: { width: 210, height: 297, padding: 0 },
  schemas: [
    {
      name: 'logo',
      type: 'svg',
      position: { x: 20, y: 20 },
      width: 60,
      height: 60,
      loadExternalStyleSheets: false,
    },
  ],
};

const inputs = [
  {
    logo: `<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" rx="12" fill="#111827"/>
  <circle cx="60" cy="60" r="30" fill="#60A5FA"/>
  <path d="M40 62 L55 77 L82 46" stroke="#F9FAFB" stroke-width="8" fill="none"/>
</svg>`,
  },
];

const pdf = await generate({
  template,
  inputs,
  plugins: { svg: createSvgPlugin() },
});

Scaling

Optional schema fields let you control how SVG content fits inside the schema box:

• scale: Uniform scale factor (alias: zoom).
• fit: How to fit the SVG content inside the box. One of none (default), contain, cover, stretch.

When both are provided, scale is applied after the fit calculation.

Example:

{
  name: 'logo',
  type: 'svg',
  position: { x: 20, y: 20 },
  width: 60,
  height: 60,
  fit: 'contain',
  scale: 1.1,
}

For advanced measurement, getSvgBoundingBox is exported and can be used with a DOM and a jsPDF instance.

Notes

• Positions and sizes are in millimeters, matching pdfME's layout system.
• When a DOM is available (browser or a DOM shim in Node), the plugin uses the internal svg2pdf pipeline for higher fidelity.
• When no DOM is available, it can fall back to pdf-lib's drawSvg for compatibility (if fallbackToPdfLib is set to true in input schema) or throw an error.
• Fit modes rely on SVG bounding boxes and require a DOM-enabled environment.
• Set loadExternalStyleSheets: true to allow external CSS in SVGs (requires network access and a DOM-enabled environment).

License

• Plugin Code and changes to Main Code: MIT License, Copyright (c) 2025 Mohammad Hadi Hosseinpour
• Main Code: From svg2pdf.js, MIT License, Copyright (c) 2015-2025 yWorks GmbH
• tsconfig.*.json, import info parts of package.json and npm scripts: From pdfME, MIT License, Copyright (c) 2020 HandDot

LLM Usage

Most of the new modifications in this repository (the plugin code) has been written by LLMs (Gemini-3-Pro-Preview and GPT-5.2-Codex-ExtraHigh).