SVG Print PDF

A JavaScript/TypeScript package to convert HTML Canvas to print-ready CMYK PDFs with SVG and spot color support.

Features

• Convert Canvas content directly to PDF without rasterization, preserving path data
• Support CMYK color space for print-ready output
• Implement spot color support for printing marks and cutting guides
• Preserve SVG elements as vectors in the final PDF
• Use canvas dimensions to determine PDF size (in mm)
• Print-ready CMYK PDF with proper color space handling
• Vector output that can be opened and edited in Illustrator
• ICC profile support for accurate color management
• Proper handling of SVG paths with coordinate system conversion
• Compliant PDF stream formatting for maximum compatibility

Installation

npm install svg-print-pdf

Usage

import { CanvasToPDF, ISpotColor } from "svg-print-pdf";

// Define a spot color
const thruCut: ISpotColor = {
  name: "Thru-cut",
  cmyk: { c: 88.39, m: 76.85, y: 0, k: 0 },
};

// Create a new PDF generator
const pdfGenerator = new CanvasToPDF({
  width_mm: 500,
  height_mm: 300,
  colorProfile: "USWebCoatedSWOP.icc",
  spotColors: [thruCut],
  preserveVectors: true,
  illustratorCompatible: true,
});

// Add a blue rectangle
pdfGenerator.addRectangle(0, 0, 500, 300, "blue");

// Add a cut line with the spot color
pdfGenerator.addRectangle(0, 0, 500, 300, undefined, thruCut, 1);

// Add an SVG element
pdfGenerator.addSVG(
  "M.01,53.64L12.02.32c.04-.19.21-.32.4-.32h12.88c.19,0,.36.13.4.32l12.12,53.32c.06.26-.14.5-.4.5h-10.01c-.2,0-.36-.14-.4-.33l-2.54-12.94c-.04-.19-.21-.33-.4-.33h-10.93c-.2,0-.37.14-.4.33l-2.47,12.94c-.04.19-.21.33-.4.33H.41c-.26,0-.46-.24-.4-.5ZM14.62,32.41h8.1c.12,0,.22-.11.2-.24l-4.08-21.44c-.04-.22-.35-.22-.39,0l-4.02,21.44c-.02.12.07.24.2.24Z", // SVG path for letter "A"
  "0 0 37.83 54", // viewBox
  200, // x position
  100, // y position
  100, // width
  100, // height
  "white" // fill color
);

// Generate and download the PDF
pdfGenerator.downloadPDF("output.pdf");

Demo

The package includes a Next.js demo project that showcases the functionality. To run the demo:

# Install dependencies
npm install

# Start the demo
npm run dev

The demo shows a 500mm × 300mm blue rectangle with a white SVG letter "A" in the center and a Thru-cut spot color outline.

PDF Structure

The generated PDFs have the following structure:

1. PDF Version: 1.6
2. Color Space: CMYK with ICC profile
3. Spot Colors: Defined as separation color spaces
4. Vector Data: All elements are preserved as vectors
5. Measurements: All dimensions are in millimeters, converted to points in the PDF (1mm = 2.83465pt)
6. Metadata: Includes creation date, producer, and title
7. Stream Formatting: Proper newlines around stream content for maximum compatibility

For more details on the PDF structure, see the docs/PDF-STRUCTURE.md file.

Recent Improvements

SVG Path Rendering

• Improved SVG path rendering with proper coordinate system conversion
• Fixed issues with SVG path orientation and scaling
• Enhanced support for complex SVG paths
• Proper handling of SVG viewBox attributes

PDF Stream Formatting

• Fixed PDF stream formatting to ensure compatibility with all PDF readers
• Proper handling of newlines in PDF streams
• Accurate stream length calculations
• Enhanced cross-reference table formatting

Color Management

• Improved spot color handling
• Enhanced CMYK color conversion
• Proper ICC profile embedding

ICC Profiles

The package includes several ICC profiles for different printing conditions. The default profile is USWebCoatedSWOP.icc.

To use a specific ICC profile:

const pdfGenerator = new CanvasToPDF({
  // ...
  colorProfile: "GRACoL2013_CRPC6.icc",
  // ...
});

See the ICC_Profiles/README.md file for a complete list of available profiles.

API Reference

CanvasToPDF

The main class for creating PDFs from canvas elements.

Constructor

new CanvasToPDF(options: ICanvasToPDFOptions)

Options

• width_mm: Width of the PDF in millimeters
• height_mm: Height of the PDF in millimeters
• colorProfile: ICC color profile to use (default: 'USWebCoatedSWOP.icc')
• spotColors: Array of spot colors to register
• preserveVectors: Whether to preserve vector data (default: true)
• illustratorCompatible: Whether to make the PDF compatible with Adobe Illustrator (default: true)

Methods

• addRectangle(x, y, width, height, fill?, stroke?, strokeWidth?): Add a rectangle
• addLine(x1, y1, x2, y2, stroke?, strokeWidth?): Add a line
• addCircle(x, y, radius, fill?, stroke?, strokeWidth?): Add a circle
• addSVG(path, viewBox, x, y, width, height, fill?, stroke?, strokeWidth?): Add an SVG element
• addPath(path, x, y, fill?, stroke?, strokeWidth?): Add a custom path
• registerSpotColor(spotColor): Register a spot color
• getSpotColor(name): Get a registered spot color by name
• getElements(): Get all tracked elements
• clear(): Clear all tracked elements
• generatePDF(): Generate PDF data as ArrayBuffer
• downloadPDF(filename?): Generate and download the PDF

Color Utilities

The package includes utilities for color conversion:

• rgbToCmyk(rgb): Convert RGB to CMYK
• cmykToRgb(cmyk): Convert CMYK to RGB
• hexToRgb(hex): Convert hex color to RGB
• hexToCmyk(hex): Convert hex color to CMYK
• colorNameToRgb(colorName): Convert CSS color name to RGB
• toCmyk(color): Convert any color representation to CMYK

SVG Utilities

The package includes utilities for handling SVG elements:

• parseSVGPath(pathData): Parse SVG path data
• svgToCanvasElement(svgElement): Convert SVG element to canvas element
• calculateSVGDimensions(viewBox, width?, height?): Calculate SVG dimensions
• centerSVGElement(svgElement, containerWidth, containerHeight): Center an SVG element
• createSVGElement(path, viewBox, options?): Create an SVG element

ICC Profile Utilities

The package includes utilities for handling ICC profiles:

• loadICCProfile(profileName): Load ICC profile data from a URL
• encodeICCProfileForPDF(iccData): Encode ICC profile data for inclusion in a PDF
• createICCProfileDict(iccData): Create ICC profile dictionary for PDF
• createICCColorSpaceArray(iccProfileObjNumber): Create ICC-based color space array for PDF

Testing

The package includes Jest tests for all functionality. To run the tests:

npm test

Compatibility

The generated PDFs have been tested with:

• Adobe Acrobat Reader DC
• Adobe Illustrator
• Adobe InDesign
• Chrome PDF Viewer
• Safari PDF Viewer

License

MIT