@sedan-utils/svgsaver

download an SVG element with css styles

Usage no npm install needed!

<script type="module">
  import sedanUtilsSvgsaver from 'https://cdn.skypack.dev/@sedan-utils/svgsaver';
</script>

README

svgsaver

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

NPM version Downloads Downloads

Build Status Codacy Badge

js-semistandard-style License

Features

  • Fork from svgsaver
  • Download <svg> by element object.
  • Download as SVG or PNG or JPG or other image file.
  • Support custom MIME type.
  • 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 @sedan-utils/svgsaver

Bower

bower install @sedan-utils/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
svgsaver.asPng(svg);                                // save as Png
svgsaver.asJpg(svg);                                // save as JPG
svgsaver.as(svg, 'filename', 'image/jpeg', jpeg);                                // save as other image type

Demos

Acknowledgments

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

License

MIT License