Javascript Library for Exporting SVG Charts from DOM

An easy-to-use client-side Javascript library to export SVG graphics from webpages and download them as an SVG, PDF, or bitmap image (JPEG, PNG). Written in Vanilla JavaScript. It was originally created to export D3.js charts.

The library is characterized by:

Export SVG DOM object objects or SVG sequences to an SVG, PNG, JPEG, and PDF file.
Specify a custom size for the exported image or graphic.
High-resolution bitmap image using the scale.
Including SVG external CSS stylesheets.
Export text in custom embedded fonts.
Work with transparent background to convert JPEG format.
Exporting hidden SVGs in the DOM (view: none, SVGs in hidden .shapes, dropdown menus or tabs, etc.).

How to make use of it:

1. Download and load the svg-export.js library within the doc.

<script src="svg-export.min.js"></script>

2. Load the Canvg library if it’s essential to export SVG information as a picture.

<script src="https://unpkg.com/canvg/lib/umd.js"></script>

3. Load the next JavaScript libraries if it’s essential to export SVG information as a PDF.

<script src="https://cdn.jsdelivr.net/npm/pdfkit/js/pdfkit.min.js"></script>
<script src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
<script src="https://cdn.jsdelivr.net/npm/svg-to-pdfkit/source.min.js"></script>

4. Export your SVG as an SVG file.

svgExport.downloadSvg(
  // SVG ID
  "#mysvg",
  // Fille name
  "Filename",
  {  custom size
    width: 200, 
    height: 200 
  }
);

5. Export your SVG as a picture.

svgExport.downloadPng(
  // SVG ID
  "#mysvg",
  // Fille name
  "Filename",
  {
    // options here
  }
);
svgExport.downloadJpeg(
  // SVG ID
  "#mysvg",
  // Fille name
  "Filename",
  {
    // options here
  }
);

6. Export your SVG as a PDF file.

svgExport.downloadPdf(
  // SVG ID
  "#mysvg",
  // Fille name
  "Filename",
  {
    // options here
  }
);

7. Full choices with default values.

{
  width: 100,
  height: 100, 
  scale: 1,
  useCSS: true, // handles external CSS in SVG elements
  PDFOptions: {
    customFonts: [],
    pageLayout: { margin: 50, margins: {} },
    addTitleToPage: true,
    chartCaption: "",
    PDFtextFontFamily: "Helvetica",
    PDFTitleFontSize: 20,
    PDFCaptionFontSize: 14
  }
}

Save SVG Data To A File Using the svg-export, svg exportJS Plugin/Github