Save SVG Data To A File Using the svg-export JavaScript library

Category: Image , Javascript | December 28, 2020
Author: sharonchoong
Views Total: 945 views
Official Page: Go to website
Last Update: December 28, 2020
License: MIT

Preview:

Save SVG Data To A File Using the svg-export JavaScript library

Description:

svg-export is a vanilla JavaScript library that exports and saves SVG data embedded in the document as Image, PDF, or SVG file.

How to use it:

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

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

2. Load the Canvg library if you need to export SVG data as an image.

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

3. Load the following JavaScript libraries if you need to export SVG data 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 an image.

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 options 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
  }
}

Changelog:

12/28/2020

  • fix issue with array-like CSSStyleDeclaration object

You Might Be Interested In:


Leave a Reply