pinkdiamond1 / svgsaver

download an svg element as an SVG or PNG file, including CSS defined styles

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