Embedding SVG in PDF (exporting SVG to PDF using JS)

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

For anyone looking for a JS-only solution: PDFKit seems to be the superior solution to generate PDF from JS these days, and it supports all SVG geometry primitives (including interpreting path geometry strings) out of the box. All that would be needed to render existing SVG content would be a DOM-walker that keeps track of CSS styling and inheritance, if you do not require complex stuff like symbols etc.,I've read about the PDF format's possiblities to embed SVG images, and it seems to have been enabled since Acrobat Reader 5 (along with the ImageViewer plugin). But it doesn't work. I've tried with 3 different PDF readers without success.,I haven't tried it, but this could allow discarding the use of an external API and/or having to rely on a server-side solution.,I have two questions; can this be solved? And if yes, what are the specifications for embedding SVG inside of a PDF? With that info, I can build that support in jsPDF myself.

  1. Import packages in your index.html.
<script src="https://cdn.jsdelivr.net/npm/pdfkit@0.10.0/js/pdfkit.standalone.js"></script>
<script src="https://bundle.run/blob-stream@0.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-to-pdfkit@0.1.8/source.js"></script>
  1. Run this function, where svg is an SVG DOM element, or SVG string.
function downloadPDF(svg, outFileName) {
   let doc = new PDFDocument({
      compress: false
   });
   SVGtoPDF(doc, svg, 0, 0);
   let stream = doc.pipe(blobStream());
   stream.on('finish', () => {
      let blob = stream.toBlob('application/pdf');
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = outFileName + ".pdf";
      link.click();
   });
   doc.end();
}
load more v
88%

The starting points: I don't have a server that can provide anything but static files. And I have an SVG element (dynamically created) in my <body> that I want to export to a vector format, preferrably PDF or SVG.,I started looking at using the already existing lib jsPDF along with downloadify. It worked fine. Unfortunately, this does not support SVG, only text.,Does this mean that PDFs has dropped SVG embedding support? I haven't found anything on this.,I haven't tried it, but this could allow discarding the use of an external API and/or having to rely on a server-side solution.

EVO HTML to PDF Converter has support for converting the SVG embedded in HTML to PDF. You can see an example for this feature here : http://www.evopdf.com/demo/HTML_to_PDF/HTML5_Features/SVG_to_PDF.aspx . The sample code for this is:

// Create a HTML to PDF converter object with default settings
HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();

// Convert the HTML page with SVG to a PDF document in a memory buffer
byte[] outPdfBuffer = htmlToPdfConverter.ConvertUrl(urlHtmlWithSVG);

// Send the PDF as response to browser

// Set response content type
Response.AddHeader("Content-Type", "application/pdf");

// Instruct the browser to open the PDF file as an attachment or inline
Response.AddHeader("Content-Disposition", String.Format("attachment; filename=SVG_to_PDF.pdf; size={0}", outPdfBuffer.Length.ToString()));

// Write the PDF document buffer to HTTP response
Response.BinaryWrite(outPdfBuffer);

// End the HTTP response and stop the current page processing
Response.End();
72%

You can get svg2pf.js via npm:,A spec.svg file that contains the svg to test,If you want to use other than really basic fonts and characters you have to add them first before calling svg2pdf:,Importing is also possible via requirejs:

npm install svg2pdf.js jspdf--save
# or
yarn add svg2pdf.js jspdf
load more v
65%

svg-export is a vanilla JavaScript library that exports and saves SVG data embedded in the document as Image, PDF, or SVG file.,3. Load the following JavaScript libraries if you need to export SVG data as a PDF.,1. Download and load the svg-export.js library in the document.,2. Load the Canvg library if you need to export SVG data as an image.

1. Download and load the svg-export.js library in the document.

<script src="svg-export.min.js"></script>
load more v
75%

Insert SVG into a PDF document created with PDFKit.,For inserting SVG graphics into a PDFKit document there is also svgkit.,github.com/alafr/SVG-to-PDFKit#readme,Gitgithub.com/alafr/SVG-to-PDFKit

Install

npm install svg - to - pdfkit--save
load more v
40%

Give it a trial: online playground.,You can get svg2pf.js via npm:,A javascript-only SVG to PDF conversion utility that runs in the browser leveraging jsPDF.,Join 50+ Udemy Online Courses Coupons Whatsapp Group Invite Links For Programmers & Developers

npm install svg2pdf.js jspdf--save
# or
yarn add svg2pdf.js jspdf
load more v
22%

An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Written in plain vanilla javascript. Originally created to export D3.js charts.,Exporting SVG DOM Element objects or serialized SVG string to SVG file, PNG, JPEG, PDF,Either download the plugin and save it in your project, or use script-tags in your html files using the hosted url.,scale (number) : a multiple by which the SVG can be increased or decreased in size. For PNG and JPEG exports, if width, height and scale are not specified, scale is set to 10 for a 10x enlargement to ensure that a higher resolution image is produced. Otherwise, the default scale is 1

Canvg (if you need JPEG/PNG export)

<script src="https://unpkg.com/canvg@3.0.1/lib/umd.js"></script>
load more v