svgsaver

svgsaver

Download an SVG element as an SVG or PNG file, including CSS defined styles.

Features

• Download <svg> by element object.
• Download as SVG or PNG file.
• Copies SVG element styles as rendered in the browser, including styles defined in CSS style sheets.
• Copies only SVG relevant and non-default styles. See here.
• Computed styles are in-lined for maximum compatibility.

Install

Node

npm install svgsaver

Bower

bower install svgsaver

JSPM

jspm install svgsaver=npm:svgsaver

Usage

For maximum compatibility across browsers include eligrey/FileSaver.js/ and eligrey/canvas-toBlob.js. See Compatibility-Chart for more information.

Example

var SvgSaver = require('svgsaver');                 // if using CommonJS environment
var svgsaver = new SvgSaver();                      // creates a new instance
var svg = document.querySelector('#mysvg');         // find the SVG element
svgsaver.asSvg(svg);                                // save as SVG

Demos

• Epicyclic Gearing - d3
• Superformula Explorer - d3
• City Construction Site - jQuery and TweenMax
• Chiasm Boilerplate (with download buttons) - Chiasm

Acknowledgments

Based on previous work on Hypercubed/angular-downloadsvg-directive. Some portions of this code inspired by raw and moagrius/copycss.

License

MIT License

Changelog

0.9.0 (2017-05-08)

• Now includes FileSaver as a dependency.
• Fix duplicated xmlns in IE 11 #7.
• Display error message in IE <= 11 in unsupported methods (getPngUri and asPng).
• Disable unsupported methods in demo.