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.
This library features:
scale
display: none
, SVGs in hidden modals, dropdowns or tabs, etc.)Demo available here.
Any of the following browsers: Chrome 14.0+, Edge 18.0+, Firefox 20.0+, Safari 10.1+, Opera 15+
Canvg (if you need JPEG/PNG export)
<script src="https://unpkg.com/canvg@3.0.1/lib/umd.js"></script>
PDFKit, blob-stream and SVG-to-PDFKit (if you need PDF export)
<script src="https://cdn.jsdelivr.net/npm/pdfkit@0.11.0/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@0.1.8/source.min.js"></script>
Either download the plugin and save it in your project, or use script-tags in your html files using the hosted url.
Download the plugin svg-export.min.js
from this repo, and add it to your project.
Add the plugin using the file hosted on Github Pages. Place the script within the <head>
tag in your html files (place prerequisites first):
<!-- svg-exportJS prerequisite: canvg -->
<script src="https://unpkg.com/canvg@3.0.1/lib/umd.js"></script>
<!-- svg-exportJS plugin -->
<script src="https://sharonchoong.github.io/svg-exportJS/svg-export.min.js"></script>
Given the <svg>
element:
<svg id="mysvg">...</svg>
In Javascript:
svgExport.downloadSvg(
document.getElementById("mysvg"), // SVG DOM Element object to be exported. Alternatively, a string of the serialized SVG can be passed
"chart title name", // chart title: file name of exported image
{ width: 200, height: 200 } // options (optional, please see below for a list of option properties)
);
svgExport.downloadPng("<svg id=\"mysvg\"></svg>", "chart title name", {
width: 200,
height: 200,
});
svgExport.downloadJpeg(svgElementObject, "chart title name");
svgExport.downloadPdf(svgString, "chart title name");
See index.html
for an example of how to use.
10
for a 10x enlargement to ensure that a higher resolution image is produced. Otherwise, the default scale is 1
true
will add references to such styles from the styles computed by the browser. If useCSS is false
, currentColor
will be changed to black
. This setting only applies if the SVG is passed as a DOM Element object, not as a string. Default is true
white
{ margin: 50, layout: "landscape" }
. This is provided to PDFKit’s addPage
. When the options width and height are not specified, a minimum size of 300x300 is used for the PDF page size; otherwise the page size wraps around the SVG size. Please see the PDFKit documentation for more infotrue
Helvetica
20
14
[{ fontName: 'FakeFont', url: 'fonts/FakeFont.ttf'}]
. Each object must have two properties: fontName
for the font name that appears in the CSS/SVG, and url
for the URL of the custom font file to be used in the PDF. A third property styleName
specifying the style name to be used can be specified for multi-collection font files (.ttc and .dfont files)Regarding embedded custom fonts used in the SVG element (using @font-face for example), please note that for SVG export, custom fonts only show correctly if the system opening the SVG file has the font installed. If this is not possible, please consider using one of the other file formats available.
Colors tested to work on all exported formats include CSS color names, HEX, RGB, RGBA and HSL.
Need to add SVG graphics to Office Word, Excel or Powerpoint presentations? SVG files can be inserted as a picture for non-pixelated graphics in Office 2016 or later, including Office 365.
Contributions are very welcome! Feel free to flag issues or pull requests.
Licensed under MIT. See LICENSE
for more information.
Sharon Choong - https://sharonchoong.github.io/
Author: sharonchoong
Demo: https://sharonchoong.github.io/svg-exportJS/index.html
Source Code: https://github.com/sharonchoong/svg-exportJS
#javascript