@yft-design/svg-lib

Convert SVG DOM nodes to vector content on a PDF page in the browser, using @yft-design/pdf-lib (fork of pdf-lib with compatible APIs).

Requirements

• A browser environment with DOM APIs (the SVG is read from a real Element).
• Install @yft-design/pdf-lib alongside @yft-design/svg-lib (peer dependency).

Installation

npm install @yft-design/svg-lib @yft-design/pdf-lib
# or
pnpm add @yft-design/svg-lib @yft-design/pdf-lib

Quick start (ESM)

import { PDFDocument } from '@yft-design/pdf-lib'
import { svg2pdf } from '@yft-design/svg-lib'

const svg = document.querySelector('svg') as SVGSVGElement
if (!svg) throw new Error('No SVG found')

const pdf = await PDFDocument.create()
pdf.addPage([svg.clientWidth || 595, svg.clientHeight || 842])

await svg2pdf(svg, pdf)

const bytes = await pdf.save()
// e.g. download
const blob = new Blob([bytes], { type: 'application/pdf' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'output.pdf'
a.click()
URL.revokeObjectURL(url)

svg2pdf API

function svg2pdf(
  element: Element,
  pdf: PDFDocument,
  options?: Svg2PdfOptions,
): Promise<PDFDocument>

Options (Svg2PdfOptions)

| Option | Type | Description | |--------|------|-------------| | x | number | Horizontal offset (PDF units, default 0). | | y | number | Vertical offset (default 0). | | width | number | Optional width for the outermost <svg> when computing layout (overrides missing width attribute; works with viewBox / height). | | height | number | Optional height for the outermost <svg> (same idea as width). | | loadExternalStyleSheets | boolean | When true, attempts to load external stylesheets referenced by the SVG (default false). | | pageIndex | number | Zero-based page index to draw on (default 0). |

The function returns the same PDFDocument instance after drawing, so you can keep adding pages or call save() as usual.

UMD / script tag

Build output includes dist/svg-lib.umd.js. You must also load @yft-design/pdf-lib so the global name PDFLib is available (this matches the Rollup globals mapping).

<script src="path/to/pdf-lib.umd.js"></script>
<script src="path/to/svg-lib.umd.js"></script>
<script>
  async function run() {
    const svg = document.querySelector('svg')
    const pdf = await PDFLib.PDFDocument.create()
    pdf.addPage([595, 842])
    await svgLib.svg2pdf(svg, pdf)
    const bytes = await pdf.save()
    // …
  }
  run()
</script>

Exact UMD filenames depend on how you vendor @yft-design/pdf-lib; check that package’s documentation for its browser bundle.

Other exports

• parse — Build an internal node tree from an SVG Element (for advanced / custom rendering pipelines).
• svgPathToOperators — Turn an SVG path d string into PDFOperator[] for manual page.pushOperators(...).
• clippathOperator — Apply clip behavior from a path string on a PDFPage.
• Context helpers: Context, Viewport, StyleSheets, TextMeasure, ReferencesHandler, AttributeState, etc. (see generated dist/index.d.ts).

TypeScript

Types are published in dist/index.d.ts ("types" field in package.json). @yft-design/pdf-lib ^1.0.2 ships its own .d.ts; no extra shim is required.

License

MIT — see LICENSE.