Giter Club home page Giter Club logo

svg-to-pdfkit's Introduction

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)

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.

svg-to-pdfkit's People

Contributors

alafr avatar awerlang avatar joshuao3 avatar kbrabrand avatar sajjad-shirazy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.