svg-to-pdfkit

What is svg-to-pdfkit?

The svg-to-pdfkit npm package allows you to render SVG images into PDF documents using the PDFKit library. This is useful for generating PDFs that include vector graphics, which can be scaled without loss of quality.

What are svg-to-pdfkit's main functionalities?

Render SVG to PDF

This feature allows you to render an SVG string into a PDF document. The code sample demonstrates how to create a PDF document, render an SVG circle into it, and save the output as a PDF file.

const PDFDocument = require('pdfkit');
const fs = require('fs');
const SVGtoPDF = require('svg-to-pdfkit');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));

const svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
SVGtoPDF(doc, svg, 0, 0);

doc.end();

Positioning SVG in PDF

This feature allows you to specify the position where the SVG should be rendered in the PDF document. The code sample demonstrates how to render an SVG circle at coordinates (100, 150) in the PDF.

const PDFDocument = require('pdfkit');
const fs = require('fs');
const SVGtoPDF = require('svg-to-pdfkit');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));

const svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
SVGtoPDF(doc, svg, 100, 150);

doc.end();

Scaling SVG in PDF

This feature allows you to scale the SVG when rendering it into the PDF document. The code sample demonstrates how to render an SVG circle with a width and height of 200 units in the PDF.

const PDFDocument = require('pdfkit');
const fs = require('fs');
const SVGtoPDF = require('svg-to-pdfkit');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));

const svg = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
SVGtoPDF(doc, svg, 0, 0, { width: 200, height: 200 });

doc.end();

Other packages similar to svg-to-pdfkit

pdfkit

PDFKit is a JavaScript library for generating PDF documents, but it does not natively support rendering SVG. It is often used in conjunction with svg-to-pdfkit to achieve SVG rendering in PDFs.

svg2pdf.js

svg2pdf.js is a library that converts SVG elements to PDF using jsPDF. It provides similar functionality to svg-to-pdfkit but is designed to work with jsPDF instead of PDFKit.

canvg

canvg is a library that converts SVG into Canvas. While it does not directly convert SVG to PDF, it can be used in combination with libraries that convert Canvas to PDF to achieve similar results.

README

SVG-to-PDFKit

Insert SVG into a PDF document created with PDFKit.

Install

npm install svg-to-pdfkit --save

Use

SVGtoPDF(doc, svg, x, y, options);

    If you prefer, you can add the function to the PDFDocument prototype:

PDFDocument.prototype.addSVG = function(svg, x, y, options) {
  return SVGtoPDF(this, svg, x, y, options), this;
};

    And then simply call:

doc.addSVG(svg, x, y, options);

Parameters

doc [PDFDocument] = the PDF document created with PDFKit
svg [SVGElement or string] = the SVG object or XML code
x, y [number] = the position where the SVG will be added
options [Object] = >
  - width, height [number] = initial viewport, by default it's the page dimensions
  - preserveAspectRatio [string] = override alignment of the SVG content inside its viewport
  - useCSS [boolean] = use the CSS styles computed by the browser (for SVGElement only)
  - fontCallback [function] = function called to get the fonts, see source code
  - imageCallback [function] = same as above for the images (for Node.js)
  - documentCallback [function] = same as above for the external SVG documents
  - colorCallback [function] = function called to get color, making mapping to CMYK possible
  - warningCallback [function] = function called when there is a warning
  - assumePt [boolean] = assume that units are PDF points instead of SVG pixels
  - precision [number] = precision factor for approximative calculations (default = 3)

Fonts

In the browser, it's easier to register fonts (see here how) before calling SVGtoPDF. SVGtoPDF doesn't wait for font loading with asynchronous XMLHttpRequest.

Make sure to name the fonts with the exact pattern 'MyFont', 'MyFont-Bold', 'MyFont-Italic', 'MyFont-BoldItalic' (case sensitive), if the font is named font-family="MyFont" in the svg. Missing Bold, Italic, BoldItalic fonts are simulated with stroke and skew angle.

If your fonts don't follow this pattern, or you want to register fonts at the moment they are encountered in the svg, you can use a custom fontCallback function.

Demos

    https://alafr.github.io/SVG-to-PDFKit/examples/demo.htm

    https://alafr.github.io/SVG-to-PDFKit/examples/options.htm

NodeJS example

    https://runkit.com/alafr/5a1377ff160182001232a91d

Supported

• shapes: rect, circle, path, ellipse, line, polyline, polygon
• special elements: use, nested svg
• text elements: text, tspan, textPath
• text attributes: x, y, dx, dy, rotate, text-anchor, textLength, word-spacing, letter-spacing, font-size
• styling: with attributes only
• colors: fill, stroke & color (rgb, rgba, hex, string), fill-opacity, stroke-opacity & opacity
• units: all standard units
• transformations: transform, viewBox & preserveAspectRatio attributes
• clip paths & masks
• images
• fonts
• gradients
• patterns
• links

Unsupported

• filters
• text attributes: font-variant, writing-mode, unicode-bidi
• foreignObject (#37)
• other things I don't even know they exist

Warning

• Use an updated PDFKit version (≥0.8.1): see here how to build it, or use the prebuilt file in the examples folder.
• There are bugs, please send issues and/or pull requests.

License

    MIT

Other useful projects

• PDFKit, the JavaScript PDF generation library for Node and the browser.
• For inserting SVG graphics into a PDFKit document there is also svgkit.
• For the opposite conversion, from PDF to SVG, you can use Mozilla's PDF.js.