SVG-to-PDFKit
Notes: Added by forker (jacobbubu)
- Using peerDependencies for pdfkit
- adding callback for element drawing.
- support color from color books
- must use my forked pdfkit
- support customized getComputedStyle
- Add getComputedStyleCallback
Example for parseColorCallback
;;const getColor = bookName colorName: stringconst book = ;if bookrecordscolorNamereturnname: colorNamecolorSpace: bookcolorSpacecomponents: bookrecordscolorNamecomponentsisSpot: bookisSpot;;// <path d="..." fill="COLOR_BOOK(PANTONE+ CMYK Coated/PANTONE P 24-8 C)"></path>const parseColorCallback = {const temp = color;if tempconst bookName colorName = temp;return ;};const draw = {doc;try;finallydoc;};
Example for getComputedStyleCallback
fs = require 'fs'PDFDocument = require 'pdfkit'SVGtoPDF = require 'svg-to-pdfkit'open = require 'opn'cheerio = require 'cheerio'css = require 'css'doc = autoFirstPage: false###<svg><defs><style>.cls-1 {fill: red;}.cls-2 {stroke: yellow;}</style></defs><rect class="cls-1 cls-2" x="0" y="0" width="100" height="100" /></svg>###svgContent = fsreadFileSync 'has-css.svg''utf8'$ = cheerioload svgContentxmlMode: truestyles = reducecall $'svg defs style'contentsif currtype is 'text'sum += currdata + '\n'sum''parsed = cssparsestylescssProps = parsedstylesheetrulesreduceif ruletype is 'rule'props = ruledeclarationsreducesumdecorproperty= decorvaluesumfor s in ruleselectorspropsBySelectors= propspropsBySelectordocpipe fscreateWriteStream 'output.pdf'docaddPage size: 512512margin: 0=if nodegetAttribute'class'classNames = nodegetAttribute'class'split/\s/styles = classNamesreducename = '.' + nameif cssPropsnamesum = sum...cssPropsname...sumstylesSVGtoPDF docsvgContent00 width: 200height: 200getComputedStyleCallbackdocend;
Insert SVG into a PDF document created with PDFKit.
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)
- 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)
Demos:
https://alafr.github.io/SVG-to-PDFKit/examples/demo.htm
https://alafr.github.io/SVG-to-PDFKit/examples/options.htm
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
Unsupported:
- links (#18)
- filters
- text attributes: text-decoration, 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:
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.