angular-downloadsvg-directive

angular-downloadsvg-directive

AngularJS directive to download an SVG element as an SVG or PNG file, including CSS defined styles.

Features

• Downloads SVG elements as an SVG or PNG file.
• Downloads the first <svg> element by default.
• Download <svg> by element or selector.
• Copies SVG element styles as rendered in the browser, including styles defined in Cascading Style Sheets (CSS).
• Copies only SVG relevant and non-default styles. See here.
• Computed styles are in-lined for maximum compatibility.

Install

npm

npm install angular-downloadsvg-directive

Bower

bower install angular-downloadsvg-directive

jspm

jspm install npm:angular-downloadsvg-directive

Usage

1. Include the angular-downloadsvg-directive.js in app. For bower at bower_components/angular-downloadsvg-directive/angular-downloadsvg-directive.js.
2. Add hc.downloader as a module dependency to your app.

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

As a directive

<button svg-download="#chart" title="mysvg">Download as SVG</button>
<button svg-download="#chart" title="mysvg" type="png">Download as PNG</button>

By default the downloaded file filename will be the title attribute plus ".svg" (or "png"). An optional filename attribute can also be given. See documentation

License

Copyright (c) 2013-2015 Jayson Harshbarger

MIT License

Changelog

0.2.0 (2016-08-31)

• Emits events on asSvg and asPng
• asSvg and asPng are now async
• asSvg and asPng return promises