# svgsaver

> download an SVG element with css styles

Latest version **0.9.0** (published 2017-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install svgsaver
pnpm add svgsaver
yarn add svgsaver
bun add svgsaver
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.0 |
| Published | 2017-05-08 |
| First published | 2015-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 60 |
| Author | J. Harshbarger |
| Maintainers | hypercubed |
| Keywords | svg, FileSaver, dom, css, png |

## Links

- npm: https://www.npmjs.com/package/svgsaver
- Repository: https://github.com/Hypercubed/svgsaver
- Homepage: https://github.com/Hypercubed/svgsaver#readme
- Issues: https://github.com/Hypercubed/svgsaver/issues
- npm.io page: https://npm.io/package/svgsaver

## Dependencies (2)

- [file-saver](https://npm.io/package/file-saver.md) ^1.3.3
- [computed-styles](https://npm.io/package/computed-styles.md) ^1.1.2

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.9.0 (latest) — 2017-05-08
- 0.7.0 (rc) — 2017-04-12
- 0.8.2 — 2017-04-26
- 0.8.1 — 2017-04-26
- 0.8.0 — 2017-04-25
- 0.6.2 — 2016-11-11
- 0.6.1 — 2015-11-17
- 0.6.0 — 2015-11-16
- 0.5.0 — 2015-11-13
- 0.4.0 — 2015-11-05
- 0.3.3 — 2015-10-28
- 0.3.2 — 2015-10-27
- 0.3.1 — 2015-10-23
- 0.3.0 — 2015-10-21
- 0.2.2 — 2015-10-14
- … 9 more at https://npm.io/package/svgsaver/versions

## README

# svgsaver

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

[![NPM version][npm-badge]][npm]
[![Downloads][download-badge]][npm]
![Downloads][bower-badge]

[![Build Status][travis-image]][travis-url]
[![Codacy Badge][codacy-badge]][Codacy]

[![js-semistandard-style][standard-badge]][semistandard]
[![License][license-badge]][MIT License]

## 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](http://www.w3.org/TR/SVG/propidx.html).
- Computed styles are in-lined for maximum compatibility.

## Install

### Node

```js
npm install svgsaver
```

### Bower

```js
bower install svgsaver
```

### JSPM

```js
jspm install svgsaver=npm:svgsaver
```

## Usage

*For maximum compatibility across browsers include [eligrey/FileSaver.js/](https://github.com/eligrey/FileSaver.js) and [eligrey/canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js). See [Compatibility-Chart](https://github.com/Hypercubed/svgsaver/wiki/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](http://bl.ocks.org/Hypercubed/db9e99d761f90d87cf43) - d3
- [Superformula Explorer](http://bl.ocks.org/Hypercubed/58fff7215e53d6565f32) - d3
- [City Construction Site](http://codepen.io/Hypercubed/pen/OyWadQ) - jQuery and TweenMax
- [Chiasm Boilerplate (with download buttons)](http://bl.ocks.org/Hypercubed/b01a767b41b0e679aade) - Chiasm

## Acknowledgments
Based on previous work on [Hypercubed/angular-downloadsvg-directive](https://github.com/Hypercubed/angular-downloadsvg-directive).  Some portions of this code inspired by [raw](https://github.com/densitydesign/raw/blob/master/js/directives.js) and [moagrius/copycss](https://github.com/moagrius/copycss).

## License
[MIT License]

[npm]: https://npmjs.org/package/svgsaver
[bower]: https://npmjs.org/package/svgsaver
[semistandard]: https://github.com/Flet/semistandard
[Codacy]: https://www.codacy.com/app/hypercubed/svgsaver
[MIT License]: http://en.wikipedia.org/wiki/MIT_License
[travis-url]: https://travis-ci.org/Hypercubed/svgsaver

[travis-image]: https://img.shields.io/travis/Hypercubed/svgsaver.svg
[npm-badge]: https://img.shields.io/npm/v/svgsaver.svg
[bower-badge]: https://img.shields.io/bower/v/svgsaver.svg
[standard-badge]: https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg
[download-badge]: http://img.shields.io/npm/dm/svgsaver.svg
[codacy-badge]: https://api.codacy.com/project/badge/6fe47dae30b34d2da78572b3ea36cfe0
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg

---
_Source: https://npm.io/package/svgsaver · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._