├── .gitignore
├── .npmignore
├── .travis.yml
├── .zuul.yml
├── API.md
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── bower.json
├── browser.js
├── browser.min.js
├── demo
    ├── index.html
    ├── jsdom-demo.js
    └── phantomjs-demo.js
├── esdoc.json
├── index.js
├── lib
    └── svgsaver.js
├── package.json
├── src
    ├── clonesvg.js
    ├── collection.js
    ├── index.js
    ├── saveuri.js
    ├── svgsaver.js
    └── utils.js
├── test
    └── svgsaver-spec.js
├── todo.md
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | bower_components
29 | 
30 | # IDEs
31 | .vscode
32 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !src/*
3 | !lib/*
4 | !index.*
5 | !browser.*
6 | !README.md
7 | !package.json
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - '6'
4 | 


--------------------------------------------------------------------------------
/.zuul.yml:
--------------------------------------------------------------------------------
 1 | ui: tape
 2 | browsers:
 3 |   - name: android
 4 |     version: [oldest, latest]
 5 |   - name: chrome
 6 |     version: [oldest, latest]
 7 |   - name: firefox
 8 |     version: [oldest, latest]
 9 |   - name: ie
10 |     version: oldest..latest
11 |   - name: iphone
12 |     version: [oldest, latest]
13 |   - name: opera
14 |     version: oldest..latest
15 |   - name: safari
16 |     version: oldest..latest
17 | browserify:
18 |   - transform: babelify
19 | 


--------------------------------------------------------------------------------
/API.md:
--------------------------------------------------------------------------------
  1 | <a name="SvgSaver"></a>
  2 | 
  3 | ## SvgSaver
  4 | **Kind**: global class  
  5 | **Api**: public  
  6 | 
  7 | * [SvgSaver](#SvgSaver)
  8 |     * [new SvgSaver()](#new_SvgSaver_new)
  9 |     * [.cloneSVG(el)](#SvgSaver+cloneSVG) ⇒ <code>SVGElement</code>
 10 |     * [.getHTML(el)](#SvgSaver+getHTML) ⇒ <code>String</code>
 11 |     * [.getBlob(el)](#SvgSaver+getBlob) ⇒ <code>Blog</code>
 12 |     * [.getUri(el)](#SvgSaver+getUri) ⇒ <code>String</code>
 13 |     * [.asSvg(el, [filename])](#SvgSaver+asSvg) ⇒ <code>[SvgSaver](#SvgSaver)</code>
 14 |     * [.getPngUri(el, cb)](#SvgSaver+getPngUri)
 15 |     * [.asPng(el, [filename])](#SvgSaver+asPng) ⇒ <code>[SvgSaver](#SvgSaver)</code>
 16 | 
 17 | <a name="new_SvgSaver_new"></a>
 18 | 
 19 | ### new SvgSaver()
 20 | SvgSaver constructor.
 21 | 
 22 | **Example**  
 23 | ```js
 24 | var svgsaver = new SvgSaver();                      // creates a new instance
 25 | var svg = document.querySelector('#mysvg');         // find the SVG element
 26 | svgsaver.asSvg(svg);                                // save as SVG
 27 | ```
 28 | <a name="SvgSaver+cloneSVG"></a>
 29 | 
 30 | ### svgSaver.cloneSVG(el) ⇒ <code>SVGElement</code>
 31 | Return the cloned SVG after cleaning
 32 | 
 33 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
 34 | **Returns**: <code>SVGElement</code> - SVG text after cleaning  
 35 | **Api**: public  
 36 | 
 37 | | Param | Type | Description |
 38 | | --- | --- | --- |
 39 | | el | <code>SVGElement</code> | The element to copy. |
 40 | 
 41 | <a name="SvgSaver+getHTML"></a>
 42 | 
 43 | ### svgSaver.getHTML(el) ⇒ <code>String</code>
 44 | Return the SVG HTML text after cleaning
 45 | 
 46 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
 47 | **Returns**: <code>String</code> - SVG text after cleaning  
 48 | **Api**: public  
 49 | 
 50 | | Param | Type | Description |
 51 | | --- | --- | --- |
 52 | | el | <code>SVGElement</code> | The element to copy. |
 53 | 
 54 | <a name="SvgSaver+getBlob"></a>
 55 | 
 56 | ### svgSaver.getBlob(el) ⇒ <code>Blog</code>
 57 | Return the SVG, after cleaning, as a text/xml Blob
 58 | 
 59 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
 60 | **Returns**: <code>Blog</code> - SVG as a text/xml Blob  
 61 | **Api**: public  
 62 | 
 63 | | Param | Type | Description |
 64 | | --- | --- | --- |
 65 | | el | <code>SVGElement</code> | The element to copy. |
 66 | 
 67 | <a name="SvgSaver+getUri"></a>
 68 | 
 69 | ### svgSaver.getUri(el) ⇒ <code>String</code>
 70 | Return the SVG, after cleaning, as a image/svg+xml;base64 URI encoded string
 71 | 
 72 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
 73 | **Returns**: <code>String</code> - SVG as image/svg+xml;base64 URI encoded string  
 74 | **Api**: public  
 75 | 
 76 | | Param | Type | Description |
 77 | | --- | --- | --- |
 78 | | el | <code>SVGElement</code> | The element to copy. |
 79 | 
 80 | <a name="SvgSaver+asSvg"></a>
 81 | 
 82 | ### svgSaver.asSvg(el, [filename]) ⇒ <code>[SvgSaver](#SvgSaver)</code>
 83 | Saves the SVG as a SVG file using method compatible with the browser
 84 | 
 85 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
 86 | **Returns**: <code>[SvgSaver](#SvgSaver)</code> - The SvgSaver instance  
 87 | **Api**: public  
 88 | 
 89 | | Param | Type | Description |
 90 | | --- | --- | --- |
 91 | | el | <code>SVGElement</code> | The element to copy. |
 92 | | [filename] | <code>string</code> | The filename to save, defaults to the SVG title or 'untitled.svg' |
 93 | 
 94 | <a name="SvgSaver+getPngUri"></a>
 95 | 
 96 | ### svgSaver.getPngUri(el, cb)
 97 | Gets the SVG as a PNG data URI.
 98 | 
 99 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
100 | **Api**: public  
101 | 
102 | | Param | Type | Description |
103 | | --- | --- | --- |
104 | | el | <code>SVGElement</code> | The element to copy. |
105 | | cb | <code>function</code> | Call back called with the PNG data uri. |
106 | 
107 | <a name="SvgSaver+asPng"></a>
108 | 
109 | ### svgSaver.asPng(el, [filename]) ⇒ <code>[SvgSaver](#SvgSaver)</code>
110 | Saves the SVG as a PNG file using method compatible with the browser
111 | 
112 | **Kind**: instance method of <code>[SvgSaver](#SvgSaver)</code>  
113 | **Returns**: <code>[SvgSaver](#SvgSaver)</code> - The SvgSaver instance  
114 | **Api**: public  
115 | 
116 | | Param | Type | Description |
117 | | --- | --- | --- |
118 | | el | <code>SVGElement</code> | The element to copy. |
119 | | [filename] | <code>string</code> | The filename to save, defaults to the SVG title or 'untitled.png' |
120 | 
121 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | CHANGELOG
 2 | =========
 3 | 
 4 | ## HEAD (Unreleased)
 5 | _(none)_
 6 | 
 7 | --------------------
 8 | 
 9 | ## 0.9.0 (2017-05-08)
10 | * Now includes FileSaver as a dependency.
11 | * Fix duplicated xmlns in IE 11 #7.
12 | * Display error message in IE <= 11 in unsupported methods (`getPngUri` and `asPng`).
13 | * Disable unsupported methods in demo.
14 | 
15 | ## 0.8.2 (2017-04-25)
16 | * Fix incorrect SVG being found
17 | * Fix tests
18 | 
19 | ## 0.8.1 (2017-04-25)
20 | * Add xlink namespace declaration, fixes Safari and Firefox.
21 | 
22 | ## 0.8.0 (2017-04-25)
23 | * Improved demo
24 | * Added cloneSVG public API
25 | * Added getPngUri public API
26 | * Added xlink:href to allowed attrs
27 | 
28 | ## 0.7.0 (2017-04-12)
29 | * Fix phantomjs dev in package.json
30 | 
31 | ## 0.6.2 (2016-11-11)
32 | * Fix #4, Add href to default attributes
33 | 
34 | ## 0.6.1 (2015-11-17)
35 | * Fix #1, The string to be encoded contains characters outside of the Latin1 range.
36 | 
37 | ## 0.6.0 (2015-11-16)
38 | * URI encode filenames
39 | * Flexible element selection
40 | * Throw error if no SVGs can be found
41 | 
42 | ## 0.5.0 (2015-11-13)
43 | * Support Firefox without FileSaver
44 | 
45 | ## 0.4.0 (2015-11-05)
46 | * Clean superfluous inheritable styles
47 | 
48 | ## 0.3.3 (2015-10-28)
49 | * Use latest computed-styles, fixes IE11
50 | 
51 | ## 0.3.2 (2015-10-27)
52 | * Internal change to use latest computed-styles
53 | 
54 | ## 0.3.1 (2015-10-23)
55 | * Default is now to copy all inherited styles, regardless of value
56 | 
57 | ## 0.3.0 (2015-10-20)
58 | * Now using copy-styles module
59 | * No longer removes styles from elements that match parent styles (not all styles are inheritable)
60 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright © 2015 Jayson Harshbarger
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svgsaver
 2 | 
 3 | Download an SVG element as an SVG or PNG file, including CSS defined styles.
 4 | 
 5 | [![NPM version][npm-badge]][npm]
 6 | [![Downloads][download-badge]][npm]
 7 | ![Downloads][bower-badge]
 8 | 
 9 | [![Build Status][travis-image]][travis-url]
10 | [![Codacy Badge][codacy-badge]][Codacy]
11 | 
12 | [![js-semistandard-style][standard-badge]][semistandard]
13 | [![License][license-badge]][MIT License]
14 | 
15 | ## Features
16 | - Download `<svg>` by element object.
17 | - Download as SVG or PNG file.
18 | - Copies SVG element styles as rendered in the browser, including styles defined in CSS style sheets.
19 | - Copies only SVG relevant and non-default styles.  [See here](http://www.w3.org/TR/SVG/propidx.html).
20 | - Computed styles are in-lined for maximum compatibility.
21 | 
22 | ## Install
23 | 
24 | ### Node
25 | 
26 | ```js
27 | npm install svgsaver
28 | ```
29 | 
30 | ### Bower
31 | 
32 | ```js
33 | bower install svgsaver
34 | ```
35 | 
36 | ### JSPM
37 | 
38 | ```js
39 | jspm install svgsaver=npm:svgsaver
40 | ```
41 | 
42 | ## Usage
43 | 
44 | *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.*
45 | 
46 | ### Example
47 | 
48 | ```
49 | var SvgSaver = require('svgsaver');                 // if using CommonJS environment
50 | var svgsaver = new SvgSaver();                      // creates a new instance
51 | var svg = document.querySelector('#mysvg');         // find the SVG element
52 | svgsaver.asSvg(svg);                                // save as SVG
53 | ```
54 | 
55 | ### Demos
56 | 
57 | - [Epicyclic Gearing](http://bl.ocks.org/Hypercubed/db9e99d761f90d87cf43) - d3
58 | - [Superformula Explorer](http://bl.ocks.org/Hypercubed/58fff7215e53d6565f32) - d3
59 | - [City Construction Site](http://codepen.io/Hypercubed/pen/OyWadQ) - jQuery and TweenMax
60 | - [Chiasm Boilerplate (with download buttons)](http://bl.ocks.org/Hypercubed/b01a767b41b0e679aade) - Chiasm
61 | 
62 | ## Acknowledgments
63 | 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).
64 | 
65 | ## License
66 | [MIT License]
67 | 
68 | [npm]: https://npmjs.org/package/svgsaver
69 | [bower]: https://npmjs.org/package/svgsaver
70 | [semistandard]: https://github.com/Flet/semistandard
71 | [Codacy]: https://www.codacy.com/app/hypercubed/svgsaver
72 | [MIT License]: http://en.wikipedia.org/wiki/MIT_License
73 | [travis-url]: https://travis-ci.org/Hypercubed/svgsaver
74 | 
75 | [travis-image]: https://img.shields.io/travis/Hypercubed/svgsaver.svg
76 | [npm-badge]: https://img.shields.io/npm/v/svgsaver.svg
77 | [bower-badge]: https://img.shields.io/bower/v/svgsaver.svg
78 | [standard-badge]: https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg
79 | [download-badge]: http://img.shields.io/npm/dm/svgsaver.svg
80 | [codacy-badge]: https://api.codacy.com/project/badge/6fe47dae30b34d2da78572b3ea36cfe0
81 | [license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
82 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svgsaver",
 3 |   "description": "download an SVG element with css styles",
 4 |   "main": "browser.js",
 5 |   "homepage": "https://github.com/Hypercubed/svgsaver",
 6 |   "authors": [
 7 |     "J. Harshbarger <hypercubed@gmail.com>"
 8 |   ],
 9 |   "moduleType": [
10 |     "amd",
11 |     "globals",
12 |     "node"
13 |   ],
14 |   "keywords": [
15 |     "svg",
16 |     "FileSaver",
17 |     "dom",
18 |     "css",
19 |     "png"
20 |   ],
21 |   "license": "MIT",
22 |   "ignore": [
23 |     "**/.*",
24 |     "node_modules",
25 |     "bower_components",
26 |     "test",
27 |     "tests",
28 |     "demo"
29 |   ],
30 |   "dependencies": {
31 |     "FileSaver.js": "~0.0.2"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/browser.js:
--------------------------------------------------------------------------------
  1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.SvgSaver = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | 'use strict';
  3 | 
  4 | Object.defineProperty(exports, '__esModule', {
  5 |   value: true
  6 | });
  7 | 
  8 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  9 | 
 10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 11 | 
 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 13 | 
 14 | var _computedStyles = require('computed-styles');
 15 | 
 16 | var _computedStyles2 = _interopRequireDefault(_computedStyles);
 17 | 
 18 | var _fileSaver = require('file-saver');
 19 | 
 20 | var _fileSaver2 = _interopRequireDefault(_fileSaver);
 21 | 
 22 | var svgStyles = { // Whitelist of CSS styles and default values
 23 |   'alignment-baseline': 'auto',
 24 |   'baseline-shift': 'baseline',
 25 |   'clip': 'auto',
 26 |   'clip-path': 'none',
 27 |   'clip-rule': 'nonzero',
 28 |   'color': 'rgb(51, 51, 51)',
 29 |   'color-interpolation': 'srgb',
 30 |   'color-interpolation-filters': 'linearrgb',
 31 |   'color-profile': 'auto',
 32 |   'color-rendering': 'auto',
 33 |   'cursor': 'auto',
 34 |   'direction': 'ltr',
 35 |   'display': 'inline',
 36 |   'dominant-baseline': 'auto',
 37 |   'enable-background': '',
 38 |   'fill': 'rgb(0, 0, 0)',
 39 |   'fill-opacity': '1',
 40 |   'fill-rule': 'nonzero',
 41 |   'filter': 'none',
 42 |   'flood-color': 'rgb(0, 0, 0)',
 43 |   'flood-opacity': '1',
 44 |   'font': '',
 45 |   'font-family': 'normal',
 46 |   'font-size': 'medium',
 47 |   'font-size-adjust': 'auto',
 48 |   'font-stretch': 'normal',
 49 |   'font-style': 'normal',
 50 |   'font-variant': 'normal',
 51 |   'font-weight': '400',
 52 |   'glyph-orientation-horizontal': '0deg',
 53 |   'glyph-orientation-vertical': 'auto',
 54 |   'image-rendering': 'auto',
 55 |   'kerning': 'auto',
 56 |   'letter-spacing': '0',
 57 |   'lighting-color': 'rgb(255, 255, 255)',
 58 |   'marker': '',
 59 |   'marker-end': 'none',
 60 |   'marker-mid': 'none',
 61 |   'marker-start': 'none',
 62 |   'mask': 'none',
 63 |   'opacity': '1',
 64 |   'overflow': 'visible',
 65 |   'paint-order': 'fill',
 66 |   'pointer-events': 'auto',
 67 |   'shape-rendering': 'auto',
 68 |   'stop-color': 'rgb(0, 0, 0)',
 69 |   'stop-opacity': '1',
 70 |   'stroke': 'none',
 71 |   'stroke-dasharray': 'none',
 72 |   'stroke-dashoffset': '0',
 73 |   'stroke-linecap': 'butt',
 74 |   'stroke-linejoin': 'miter',
 75 |   'stroke-miterlimit': '4',
 76 |   'stroke-opacity': '1',
 77 |   'stroke-width': '1',
 78 |   'text-anchor': 'start',
 79 |   'text-decoration': 'none',
 80 |   'text-rendering': 'auto',
 81 |   'unicode-bidi': 'normal',
 82 |   'visibility': 'visible',
 83 |   'word-spacing': '0px',
 84 |   'writing-mode': 'lr-tb'
 85 | };
 86 | 
 87 | var svgAttrs = [// white list of attributes
 88 | 'id', 'xml: base', 'xml: lang', 'xml: space', // Core
 89 | 'height', 'result', 'width', 'x', 'y', // Primitive
 90 | 'xlink: href', // Xlink attribute
 91 | 'href', 'style', 'class', 'd', 'pathLength', // Path
 92 | 'x', 'y', 'dx', 'dy', 'glyphRef', 'format', 'x1', 'y1', 'x2', 'y2', 'rotate', 'textLength', 'cx', 'cy', 'r', 'rx', 'ry', 'fx', 'fy', 'width', 'height', 'refX', 'refY', 'orient', 'markerUnits', 'markerWidth', 'markerHeight', 'maskUnits', 'transform', 'viewBox', 'version', // Container
 93 | 'preserveAspectRatio', 'xmlns', 'points', // Polygons
 94 | 'offset', 'xlink:href'];
 95 | 
 96 | // http://www.w3.org/TR/SVG/propidx.html
 97 | // via https://github.com/svg/svgo/blob/master/plugins/_collections.js
 98 | var inheritableAttrs = ['clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cursor', 'direction', 'fill', 'fill-opacity', 'fill-rule', 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'image-rendering', 'kerning', 'letter-spacing', 'marker', 'marker-end', 'marker-mid', 'marker-start', 'pointer-events', 'shape-rendering', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-rendering', 'transform', 'visibility', 'white-space', 'word-spacing', 'writing-mode'];
 99 | 
100 | /* Some simple utilities */
101 | 
102 | var isFunction = function isFunction(a) {
103 |   return typeof a === 'function';
104 | };
105 | var isDefined = function isDefined(a) {
106 |   return typeof a !== 'undefined';
107 | };
108 | var isUndefined = function isUndefined(a) {
109 |   return typeof a === 'undefined';
110 | };
111 | var isObject = function isObject(a) {
112 |   return a !== null && typeof a === 'object';
113 | };
114 | 
115 | // from https://github.com/npm-dom/is-dom/blob/master/index.js
116 | function isNode(val) {
117 |   if (!isObject(val)) {
118 |     return false;
119 |   }
120 |   if (isDefined(window) && isObject(window.Node)) {
121 |     return val instanceof window.Node;
122 |   }
123 |   return typeof val.nodeType === 'number' && typeof val.nodeName === 'string';
124 | }
125 | 
126 | /* Some utilities for cloning SVGs with inline styles */
127 | // Removes attributes that are not valid for SVGs
128 | function cleanAttrs(el, attrs, styles) {
129 |   // attrs === false - remove all, attrs === true - allow all
130 |   if (attrs === true) {
131 |     return;
132 |   }
133 | 
134 |   Array.prototype.slice.call(el.attributes).forEach(function (attr) {
135 |     // remove if it is not style nor on attrs  whitelist
136 |     // keeping attributes that are also styles because attributes override
137 |     if (attr.specified) {
138 |       if (attrs === '' || attrs === false || isUndefined(styles[attr.name]) && attrs.indexOf(attr.name) < 0) {
139 |         el.removeAttribute(attr.name);
140 |       }
141 |     }
142 |   });
143 | }
144 | 
145 | function cleanStyle(tgt, parentStyles) {
146 |   parentStyles = parentStyles || tgt.parentNode.style;
147 |   inheritableAttrs.forEach(function (key) {
148 |     if (tgt.style[key] === parentStyles[key]) {
149 |       tgt.style.removeProperty(key);
150 |     }
151 |   });
152 | }
153 | 
154 | function domWalk(src, tgt, down, up) {
155 |   down(src, tgt);
156 |   var children = src.childNodes;
157 |   for (var i = 0; i < children.length; i++) {
158 |     domWalk(children[i], tgt.childNodes[i], down, up);
159 |   }
160 |   up(src, tgt);
161 | }
162 | 
163 | // Clones an SVGElement, copies approprate atttributes and styles.
164 | function cloneSvg(src, attrs, styles) {
165 |   var clonedSvg = src.cloneNode(true);
166 | 
167 |   domWalk(src, clonedSvg, function (src, tgt) {
168 |     if (tgt.style) {
169 |       (0, _computedStyles2['default'])(src, tgt.style, styles);
170 |     }
171 |   }, function (src, tgt) {
172 |     if (tgt.style && tgt.parentNode) {
173 |       cleanStyle(tgt);
174 |     }
175 |     if (tgt.attributes) {
176 |       cleanAttrs(tgt, attrs, styles);
177 |     }
178 |   });
179 | 
180 |   return clonedSvg;
181 | }
182 | 
183 | /* global Image, MouseEvent */
184 | 
185 | /* Some simple utilities for saving SVGs, including an alternative to saveAs */
186 | 
187 | // detection
188 | var DownloadAttributeSupport = typeof document !== 'undefined' && 'download' in document.createElement('a') && typeof MouseEvent === 'function';
189 | 
190 | function saveUri(uri, name) {
191 |   if (DownloadAttributeSupport) {
192 |     var dl = document.createElement('a');
193 |     dl.setAttribute('href', uri);
194 |     dl.setAttribute('download', name);
195 |     // firefox doesn't support `.click()`...
196 |     // from https://github.com/sindresorhus/multi-download/blob/gh-pages/index.js
197 |     dl.dispatchEvent(new MouseEvent('click'));
198 |     return true;
199 |   } else if (typeof window !== 'undefined') {
200 |     window.open(uri, '_blank', '');
201 |     return true;
202 |   }
203 | 
204 |   return false;
205 | }
206 | 
207 | function createCanvas(uri, name, cb) {
208 |   var canvas = document.createElement('canvas');
209 |   var context = canvas.getContext('2d');
210 | 
211 |   var image = new Image();
212 |   image.onload = function () {
213 |     canvas.width = image.width;
214 |     canvas.height = image.height;
215 |     context.drawImage(image, 0, 0);
216 | 
217 |     cb(canvas);
218 |   };
219 |   image.src = uri;
220 |   return true;
221 | }
222 | 
223 | function savePng(uri, name) {
224 |   return createCanvas(uri, name, function (canvas) {
225 |     if (isDefined(canvas.toBlob)) {
226 |       canvas.toBlob(function (blob) {
227 |         _fileSaver2['default'].saveAs(blob, name);
228 |       });
229 |     } else {
230 |       saveUri(canvas.toDataURL('image/png'), name);
231 |     }
232 |   });
233 | }
234 | 
235 | /* global Blob */
236 | 
237 | var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
238 | 
239 | // inheritable styles may be overridden by parent, always copy for now
240 | inheritableAttrs.forEach(function (k) {
241 |   if (k in svgStyles) {
242 |     svgStyles[k] = true;
243 |   }
244 | });
245 | 
246 | var SvgSaver = (function () {
247 |   _createClass(SvgSaver, null, [{
248 |     key: 'getSvg',
249 |     value: function getSvg(el) {
250 |       if (isUndefined(el) || el === '') {
251 |         el = document.body.querySelector('svg');
252 |       } else if (typeof el === 'string') {
253 |         el = document.body.querySelector(el);
254 |       }
255 |       if (el && el.tagName !== 'svg') {
256 |         el = el.querySelector('svg');
257 |       }
258 |       if (!isNode(el)) {
259 |         throw new Error('svgsaver: Can\'t find an svg element');
260 |       }
261 |       return el;
262 |     }
263 |   }, {
264 |     key: 'getFilename',
265 |     value: function getFilename(el, filename, ext) {
266 |       if (!filename || filename === '') {
267 |         filename = (el.getAttribute('title') || 'untitled') + '.' + ext;
268 |       }
269 |       return encodeURI(filename);
270 |     }
271 | 
272 |     /**
273 |     * SvgSaver constructor.
274 |     * @constructs SvgSaver
275 |     * @api public
276 |     *
277 |     * @example
278 |     * var svgsaver = new SvgSaver();                      // creates a new instance
279 |     * var svg = document.querySelector('#mysvg');         // find the SVG element
280 |     * svgsaver.asSvg(svg);                                // save as SVG
281 |     */
282 |   }]);
283 | 
284 |   function SvgSaver() {
285 |     var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
286 | 
287 |     var attrs = _ref.attrs;
288 |     var styles = _ref.styles;
289 | 
290 |     _classCallCheck(this, SvgSaver);
291 | 
292 |     this.attrs = attrs === undefined ? svgAttrs : attrs;
293 |     this.styles = styles === undefined ? svgStyles : styles;
294 |   }
295 | 
296 |   /**
297 |   * Return the cloned SVG after cleaning
298 |   *
299 |   * @param {SVGElement} el The element to copy.
300 |   * @returns {SVGElement} SVG text after cleaning
301 |   * @api public
302 |   */
303 | 
304 |   _createClass(SvgSaver, [{
305 |     key: 'cloneSVG',
306 |     value: function cloneSVG(el) {
307 |       el = SvgSaver.getSvg(el);
308 |       var svg = cloneSvg(el, this.attrs, this.styles);
309 | 
310 |       svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
311 |       svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
312 |       svg.setAttribute('version', 1.1);
313 | 
314 |       // height and width needed to download in FireFox
315 |       svg.setAttribute('width', svg.getAttribute('width') || '500');
316 |       svg.setAttribute('height', svg.getAttribute('height') || '900');
317 | 
318 |       return svg;
319 |     }
320 | 
321 |     /**
322 |     * Return the SVG HTML text after cleaning
323 |     *
324 |     * @param {SVGElement} el The element to copy.
325 |     * @returns {String} SVG text after cleaning
326 |     * @api public
327 |     */
328 |   }, {
329 |     key: 'getHTML',
330 |     value: function getHTML(el) {
331 |       var svg = this.cloneSVG(el);
332 | 
333 |       var html = svg.outerHTML;
334 |       if (html) {
335 |         return html;
336 |       }
337 | 
338 |       // see http://stackoverflow.com/questions/19610089/unwanted-namespaces-on-svg-markup-when-using-xmlserializer-in-javascript-with-ie
339 |       svg.removeAttribute('xmlns');
340 |       svg.removeAttribute('xmlns:xlink');
341 | 
342 |       svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
343 |       svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
344 | 
345 |       return new window.XMLSerializer().serializeToString(svg);
346 |     }
347 | 
348 |     /**
349 |     * Return the SVG, after cleaning, as a text/xml Blob
350 |     *
351 |     * @param {SVGElement} el The element to copy.
352 |     * @returns {Blog} SVG as a text/xml Blob
353 |     * @api public
354 |     */
355 |   }, {
356 |     key: 'getBlob',
357 |     value: function getBlob(el) {
358 |       var html = this.getHTML(el);
359 |       return new Blob([html], { type: 'text/xml' });
360 |     }
361 | 
362 |     /**
363 |     * Return the SVG, after cleaning, as a image/svg+xml;base64 URI encoded string
364 |     *
365 |     * @param {SVGElement} el The element to copy.
366 |     * @returns {String} SVG as image/svg+xml;base64 URI encoded string
367 |     * @api public
368 |     */
369 |   }, {
370 |     key: 'getUri',
371 |     value: function getUri(el) {
372 |       var html = encodeURIComponent(this.getHTML(el));
373 |       if (isDefined(window.btoa)) {
374 |         // see http://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
375 |         return 'data:image/svg+xml;base64,' + window.btoa(unescape(html));
376 |       }
377 |       return 'data:image/svg+xml,' + html;
378 |     }
379 | 
380 |     /**
381 |     * Saves the SVG as a SVG file using method compatible with the browser
382 |     *
383 |     * @param {SVGElement} el The element to copy.
384 |     * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.svg'
385 |     * @returns {SvgSaver} The SvgSaver instance
386 |     * @api public
387 |     */
388 |   }, {
389 |     key: 'asSvg',
390 |     value: function asSvg(el, filename) {
391 |       el = SvgSaver.getSvg(el);
392 |       filename = SvgSaver.getFilename(el, filename, 'svg');
393 |       if (isFunction(Blob)) {
394 |         return _fileSaver2['default'].saveAs(this.getBlob(el), filename);
395 |       }
396 |       return saveUri(this.getUri(el), filename);
397 |     }
398 | 
399 |     /**
400 |     * Gets the SVG as a PNG data URI.
401 |     *
402 |     * @param {SVGElement} el The element to copy.
403 |     * @param {Function} cb Call back called with the PNG data uri.
404 |     * @api public
405 |     */
406 |   }, {
407 |     key: 'getPngUri',
408 |     value: function getPngUri(el, cb) {
409 |       if (isIE11) {
410 |         console.error('svgsaver: getPngUri not supported on IE11');
411 |       }
412 |       el = SvgSaver.getSvg(el);
413 |       var filename = SvgSaver.getFilename(el, null, 'png');
414 |       return createCanvas(this.getUri(el), filename, function (canvas) {
415 |         cb(canvas.toDataURL('image/png'));
416 |       });
417 |     }
418 | 
419 |     /**
420 |     * Saves the SVG as a PNG file using method compatible with the browser
421 |     *
422 |     * @param {SVGElement} el The element to copy.
423 |     * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.png'
424 |     * @returns {SvgSaver} The SvgSaver instance
425 |     * @api public
426 |     */
427 |   }, {
428 |     key: 'asPng',
429 |     value: function asPng(el, filename) {
430 |       if (isIE11) {
431 |         console.error('svgsaver: asPng not supported on IE11');
432 |       }
433 |       el = SvgSaver.getSvg(el);
434 |       filename = SvgSaver.getFilename(el, filename, 'png');
435 |       return savePng(this.getUri(el), filename);
436 |     }
437 |   }]);
438 | 
439 |   return SvgSaver;
440 | })();
441 | 
442 | exports['default'] = SvgSaver;
443 | module.exports = exports['default'];
444 | 
445 | },{"computed-styles":2,"file-saver":3}],2:[function(require,module,exports){
446 | 'use strict';
447 | 
448 | Object.defineProperty(exports, '__esModule', {
449 |   value: true
450 | });
451 | 
452 | var isDefined = function isDefined(a) {
453 |   return typeof a !== 'undefined';
454 | };
455 | var isObject = function isObject(a) {
456 |   return a !== null && typeof a === 'object';
457 | };
458 | 
459 | // from https://github.com/npm-dom/is-dom/blob/master/index.js
460 | function isNode(val) {
461 |   if (!isObject(val)) return false;
462 |   if (isDefined(window) && isObject(window.Node)) return val instanceof window.Node;
463 |   return 'number' == typeof val.nodeType && 'string' == typeof val.nodeName;
464 | }
465 | 
466 | var useComputedStyles = isDefined(window) && isDefined(window.getComputedStyle);
467 | 
468 | /**
469 | * Returns a collection of CSS property-value pairs
470 | * @param  {Element} node A DOM element to copy styles from
471 | * @param  {Object} [target] An optional object to copy styles to
472 | * @param {(Object|Boolean)} [default=true] A collection of CSS property-value pairs, false: copy none, true: copy all
473 | * @return {object} collection of CSS property-value pairs
474 | * @api public
475 | */
476 | function computedStyles(node) {
477 |   var target = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
478 |   var styleList = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2];
479 | 
480 |   if (!isNode(node)) {
481 |     throw new Error('parameter 1 is not of type \'Element\'');
482 |   }
483 | 
484 |   if (styleList === false) return target;
485 | 
486 |   if (useComputedStyles) {
487 |     var computed = node.ownerDocument.defaultView.getComputedStyle(node, null);
488 |     var keysArray = styleList === true ? computed : Object.keys(styleList);
489 |   } else {
490 |     var computed = isDefined(node.currentStyle) ? node.currentStyle : node.style;
491 |     var keysArray = styleList === true ? Object.keys(computed) : Object.keys(styleList);
492 |   }
493 | 
494 |   for (var i = 0, l = keysArray.length; i < l; i++) {
495 |     var key = keysArray[i];
496 | 
497 |     var def = styleList === true || styleList[key];
498 |     if (def === false || !isDefined(def)) continue; // copy never
499 | 
500 |     var value = useComputedStyles ? computed.getPropertyValue(key) : computed[key];
501 |     if (typeof value !== 'string' || value === '') continue; // invalid value
502 | 
503 |     if (def === true || value !== def) {
504 |       // styleList === true || styleList[key] === true || styleList[key] !== value
505 |       target[key] = value;
506 |     }
507 |   }
508 | 
509 |   return target;
510 | }
511 | 
512 | exports['default'] = computedStyles;
513 | module.exports = exports['default'];
514 | },{}],3:[function(require,module,exports){
515 | /* FileSaver.js
516 |  * A saveAs() FileSaver implementation.
517 |  * 1.3.2
518 |  * 2016-06-16 18:25:19
519 |  *
520 |  * By Eli Grey, http://eligrey.com
521 |  * License: MIT
522 |  *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
523 |  */
524 | 
525 | /*global self */
526 | /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
527 | 
528 | /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
529 | 
530 | var saveAs = saveAs || (function(view) {
531 | 	"use strict";
532 | 	// IE <10 is explicitly unsupported
533 | 	if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
534 | 		return;
535 | 	}
536 | 	var
537 | 		  doc = view.document
538 | 		  // only get URL when necessary in case Blob.js hasn't overridden it yet
539 | 		, get_URL = function() {
540 | 			return view.URL || view.webkitURL || view;
541 | 		}
542 | 		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
543 | 		, can_use_save_link = "download" in save_link
544 | 		, click = function(node) {
545 | 			var event = new MouseEvent("click");
546 | 			node.dispatchEvent(event);
547 | 		}
548 | 		, is_safari = /constructor/i.test(view.HTMLElement) || view.safari
549 | 		, is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
550 | 		, throw_outside = function(ex) {
551 | 			(view.setImmediate || view.setTimeout)(function() {
552 | 				throw ex;
553 | 			}, 0);
554 | 		}
555 | 		, force_saveable_type = "application/octet-stream"
556 | 		// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
557 | 		, arbitrary_revoke_timeout = 1000 * 40 // in ms
558 | 		, revoke = function(file) {
559 | 			var revoker = function() {
560 | 				if (typeof file === "string") { // file is an object URL
561 | 					get_URL().revokeObjectURL(file);
562 | 				} else { // file is a File
563 | 					file.remove();
564 | 				}
565 | 			};
566 | 			setTimeout(revoker, arbitrary_revoke_timeout);
567 | 		}
568 | 		, dispatch = function(filesaver, event_types, event) {
569 | 			event_types = [].concat(event_types);
570 | 			var i = event_types.length;
571 | 			while (i--) {
572 | 				var listener = filesaver["on" + event_types[i]];
573 | 				if (typeof listener === "function") {
574 | 					try {
575 | 						listener.call(filesaver, event || filesaver);
576 | 					} catch (ex) {
577 | 						throw_outside(ex);
578 | 					}
579 | 				}
580 | 			}
581 | 		}
582 | 		, auto_bom = function(blob) {
583 | 			// prepend BOM for UTF-8 XML and text/* types (including HTML)
584 | 			// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
585 | 			if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
586 | 				return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
587 | 			}
588 | 			return blob;
589 | 		}
590 | 		, FileSaver = function(blob, name, no_auto_bom) {
591 | 			if (!no_auto_bom) {
592 | 				blob = auto_bom(blob);
593 | 			}
594 | 			// First try a.download, then web filesystem, then object URLs
595 | 			var
596 | 				  filesaver = this
597 | 				, type = blob.type
598 | 				, force = type === force_saveable_type
599 | 				, object_url
600 | 				, dispatch_all = function() {
601 | 					dispatch(filesaver, "writestart progress write writeend".split(" "));
602 | 				}
603 | 				// on any filesys errors revert to saving with object URLs
604 | 				, fs_error = function() {
605 | 					if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
606 | 						// Safari doesn't allow downloading of blob urls
607 | 						var reader = new FileReader();
608 | 						reader.onloadend = function() {
609 | 							var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
610 | 							var popup = view.open(url, '_blank');
611 | 							if(!popup) view.location.href = url;
612 | 							url=undefined; // release reference before dispatching
613 | 							filesaver.readyState = filesaver.DONE;
614 | 							dispatch_all();
615 | 						};
616 | 						reader.readAsDataURL(blob);
617 | 						filesaver.readyState = filesaver.INIT;
618 | 						return;
619 | 					}
620 | 					// don't create more object URLs than needed
621 | 					if (!object_url) {
622 | 						object_url = get_URL().createObjectURL(blob);
623 | 					}
624 | 					if (force) {
625 | 						view.location.href = object_url;
626 | 					} else {
627 | 						var opened = view.open(object_url, "_blank");
628 | 						if (!opened) {
629 | 							// Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
630 | 							view.location.href = object_url;
631 | 						}
632 | 					}
633 | 					filesaver.readyState = filesaver.DONE;
634 | 					dispatch_all();
635 | 					revoke(object_url);
636 | 				}
637 | 			;
638 | 			filesaver.readyState = filesaver.INIT;
639 | 
640 | 			if (can_use_save_link) {
641 | 				object_url = get_URL().createObjectURL(blob);
642 | 				setTimeout(function() {
643 | 					save_link.href = object_url;
644 | 					save_link.download = name;
645 | 					click(save_link);
646 | 					dispatch_all();
647 | 					revoke(object_url);
648 | 					filesaver.readyState = filesaver.DONE;
649 | 				});
650 | 				return;
651 | 			}
652 | 
653 | 			fs_error();
654 | 		}
655 | 		, FS_proto = FileSaver.prototype
656 | 		, saveAs = function(blob, name, no_auto_bom) {
657 | 			return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
658 | 		}
659 | 	;
660 | 	// IE 10+ (native saveAs)
661 | 	if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
662 | 		return function(blob, name, no_auto_bom) {
663 | 			name = name || blob.name || "download";
664 | 
665 | 			if (!no_auto_bom) {
666 | 				blob = auto_bom(blob);
667 | 			}
668 | 			return navigator.msSaveOrOpenBlob(blob, name);
669 | 		};
670 | 	}
671 | 
672 | 	FS_proto.abort = function(){};
673 | 	FS_proto.readyState = FS_proto.INIT = 0;
674 | 	FS_proto.WRITING = 1;
675 | 	FS_proto.DONE = 2;
676 | 
677 | 	FS_proto.error =
678 | 	FS_proto.onwritestart =
679 | 	FS_proto.onprogress =
680 | 	FS_proto.onwrite =
681 | 	FS_proto.onabort =
682 | 	FS_proto.onerror =
683 | 	FS_proto.onwriteend =
684 | 		null;
685 | 
686 | 	return saveAs;
687 | }(
688 | 	   typeof self !== "undefined" && self
689 | 	|| typeof window !== "undefined" && window
690 | 	|| this.content
691 | ));
692 | // `self` is undefined in Firefox for Android content script context
693 | // while `this` is nsIContentFrameMessageManager
694 | // with an attribute `content` that corresponds to the window
695 | 
696 | if (typeof module !== "undefined" && module.exports) {
697 |   module.exports.saveAs = saveAs;
698 | } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
699 |   define("FileSaver.js", function() {
700 |     return saveAs;
701 |   });
702 | }
703 | 
704 | },{}]},{},[1])(1)
705 | });


--------------------------------------------------------------------------------
/browser.min.js:
--------------------------------------------------------------------------------
1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.SvgSaver=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var _computedStyles=require("computed-styles");var _computedStyles2=_interopRequireDefault(_computedStyles);var _fileSaver=require("file-saver");var _fileSaver2=_interopRequireDefault(_fileSaver);var svgStyles={"alignment-baseline":"auto","baseline-shift":"baseline",clip:"auto","clip-path":"none","clip-rule":"nonzero",color:"rgb(51, 51, 51)","color-interpolation":"srgb","color-interpolation-filters":"linearrgb","color-profile":"auto","color-rendering":"auto",cursor:"auto",direction:"ltr",display:"inline","dominant-baseline":"auto","enable-background":"",fill:"rgb(0, 0, 0)","fill-opacity":"1","fill-rule":"nonzero",filter:"none","flood-color":"rgb(0, 0, 0)","flood-opacity":"1",font:"","font-family":"normal","font-size":"medium","font-size-adjust":"auto","font-stretch":"normal","font-style":"normal","font-variant":"normal","font-weight":"400","glyph-orientation-horizontal":"0deg","glyph-orientation-vertical":"auto","image-rendering":"auto",kerning:"auto","letter-spacing":"0","lighting-color":"rgb(255, 255, 255)",marker:"","marker-end":"none","marker-mid":"none","marker-start":"none",mask:"none",opacity:"1",overflow:"visible","paint-order":"fill","pointer-events":"auto","shape-rendering":"auto","stop-color":"rgb(0, 0, 0)","stop-opacity":"1",stroke:"none","stroke-dasharray":"none","stroke-dashoffset":"0","stroke-linecap":"butt","stroke-linejoin":"miter","stroke-miterlimit":"4","stroke-opacity":"1","stroke-width":"1","text-anchor":"start","text-decoration":"none","text-rendering":"auto","unicode-bidi":"normal",visibility:"visible","word-spacing":"0px","writing-mode":"lr-tb"};var svgAttrs=["id","xml: base","xml: lang","xml: space","height","result","width","x","y","xlink: href","href","style","class","d","pathLength","x","y","dx","dy","glyphRef","format","x1","y1","x2","y2","rotate","textLength","cx","cy","r","rx","ry","fx","fy","width","height","refX","refY","orient","markerUnits","markerWidth","markerHeight","maskUnits","transform","viewBox","version","preserveAspectRatio","xmlns","points","offset","xlink:href"];var inheritableAttrs=["clip-rule","color","color-interpolation","color-interpolation-filters","color-profile","color-rendering","cursor","direction","fill","fill-opacity","fill-rule","font","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","glyph-orientation-horizontal","glyph-orientation-vertical","image-rendering","kerning","letter-spacing","marker","marker-end","marker-mid","marker-start","pointer-events","shape-rendering","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","text-anchor","text-rendering","transform","visibility","white-space","word-spacing","writing-mode"];var isFunction=function isFunction(a){return typeof a==="function"};var isDefined=function isDefined(a){return typeof a!=="undefined"};var isUndefined=function isUndefined(a){return typeof a==="undefined"};var isObject=function isObject(a){return a!==null&&typeof a==="object"};function isNode(val){if(!isObject(val)){return false}if(isDefined(window)&&isObject(window.Node)){return val instanceof window.Node}return typeof val.nodeType==="number"&&typeof val.nodeName==="string"}function cleanAttrs(el,attrs,styles){if(attrs===true){return}Array.prototype.slice.call(el.attributes).forEach(function(attr){if(attr.specified){if(attrs===""||attrs===false||isUndefined(styles[attr.name])&&attrs.indexOf(attr.name)<0){el.removeAttribute(attr.name)}}})}function cleanStyle(tgt,parentStyles){parentStyles=parentStyles||tgt.parentNode.style;inheritableAttrs.forEach(function(key){if(tgt.style[key]===parentStyles[key]){tgt.style.removeProperty(key)}})}function domWalk(src,tgt,down,up){down(src,tgt);var children=src.childNodes;for(var i=0;i<children.length;i++){domWalk(children[i],tgt.childNodes[i],down,up)}up(src,tgt)}function cloneSvg(src,attrs,styles){var clonedSvg=src.cloneNode(true);domWalk(src,clonedSvg,function(src,tgt){if(tgt.style){(0,_computedStyles2["default"])(src,tgt.style,styles)}},function(src,tgt){if(tgt.style&&tgt.parentNode){cleanStyle(tgt)}if(tgt.attributes){cleanAttrs(tgt,attrs,styles)}});return clonedSvg}var DownloadAttributeSupport=typeof document!=="undefined"&&"download"in document.createElement("a")&&typeof MouseEvent==="function";function saveUri(uri,name){if(DownloadAttributeSupport){var dl=document.createElement("a");dl.setAttribute("href",uri);dl.setAttribute("download",name);dl.dispatchEvent(new MouseEvent("click"));return true}else if(typeof window!=="undefined"){window.open(uri,"_blank","");return true}return false}function createCanvas(uri,name,cb){var canvas=document.createElement("canvas");var context=canvas.getContext("2d");var image=new Image;image.onload=function(){canvas.width=image.width;canvas.height=image.height;context.drawImage(image,0,0);cb(canvas)};image.src=uri;return true}function savePng(uri,name){return createCanvas(uri,name,function(canvas){if(isDefined(canvas.toBlob)){canvas.toBlob(function(blob){_fileSaver2["default"].saveAs(blob,name)})}else{saveUri(canvas.toDataURL("image/png"),name)}})}var isIE11=!!window.MSInputMethodContext&&!!document.documentMode;inheritableAttrs.forEach(function(k){if(k in svgStyles){svgStyles[k]=true}});var SvgSaver=function(){_createClass(SvgSaver,null,[{key:"getSvg",value:function getSvg(el){if(isUndefined(el)||el===""){el=document.body.querySelector("svg")}else if(typeof el==="string"){el=document.body.querySelector(el)}if(el&&el.tagName!=="svg"){el=el.querySelector("svg")}if(!isNode(el)){throw new Error("svgsaver: Can't find an svg element")}return el}},{key:"getFilename",value:function getFilename(el,filename,ext){if(!filename||filename===""){filename=(el.getAttribute("title")||"untitled")+"."+ext}return encodeURI(filename)}}]);function SvgSaver(){var _ref=arguments.length<=0||arguments[0]===undefined?{}:arguments[0];var attrs=_ref.attrs;var styles=_ref.styles;_classCallCheck(this,SvgSaver);this.attrs=attrs===undefined?svgAttrs:attrs;this.styles=styles===undefined?svgStyles:styles}_createClass(SvgSaver,[{key:"cloneSVG",value:function cloneSVG(el){el=SvgSaver.getSvg(el);var svg=cloneSvg(el,this.attrs,this.styles);svg.setAttribute("xmlns","http://www.w3.org/2000/svg");svg.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");svg.setAttribute("version",1.1);svg.setAttribute("width",svg.getAttribute("width")||"500");svg.setAttribute("height",svg.getAttribute("height")||"900");return svg}},{key:"getHTML",value:function getHTML(el){var svg=this.cloneSVG(el);var html=svg.outerHTML;if(html){return html}svg.removeAttribute("xmlns");svg.removeAttribute("xmlns:xlink");svg.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns","http://www.w3.org/2000/svg");svg.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink");return(new window.XMLSerializer).serializeToString(svg)}},{key:"getBlob",value:function getBlob(el){var html=this.getHTML(el);return new Blob([html],{type:"text/xml"})}},{key:"getUri",value:function getUri(el){var html=encodeURIComponent(this.getHTML(el));if(isDefined(window.btoa)){return"data:image/svg+xml;base64,"+window.btoa(unescape(html))}return"data:image/svg+xml,"+html}},{key:"asSvg",value:function asSvg(el,filename){el=SvgSaver.getSvg(el);filename=SvgSaver.getFilename(el,filename,"svg");if(isFunction(Blob)){return _fileSaver2["default"].saveAs(this.getBlob(el),filename)}return saveUri(this.getUri(el),filename)}},{key:"getPngUri",value:function getPngUri(el,cb){if(isIE11){console.error("svgsaver: getPngUri not supported on IE11")}el=SvgSaver.getSvg(el);var filename=SvgSaver.getFilename(el,null,"png");return createCanvas(this.getUri(el),filename,function(canvas){cb(canvas.toDataURL("image/png"))})}},{key:"asPng",value:function asPng(el,filename){if(isIE11){console.error("svgsaver: asPng not supported on IE11")}el=SvgSaver.getSvg(el);filename=SvgSaver.getFilename(el,filename,"png");return savePng(this.getUri(el),filename)}}]);return SvgSaver}();exports["default"]=SvgSaver;module.exports=exports["default"]},{"computed-styles":2,"file-saver":3}],2:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var isDefined=function isDefined(a){return typeof a!=="undefined"};var isObject=function isObject(a){return a!==null&&typeof a==="object"};function isNode(val){if(!isObject(val))return false;if(isDefined(window)&&isObject(window.Node))return val instanceof window.Node;return"number"==typeof val.nodeType&&"string"==typeof val.nodeName}var useComputedStyles=isDefined(window)&&isDefined(window.getComputedStyle);function computedStyles(node){var target=arguments.length<=1||arguments[1]===undefined?{}:arguments[1];var styleList=arguments.length<=2||arguments[2]===undefined?true:arguments[2];if(!isNode(node)){throw new Error("parameter 1 is not of type 'Element'")}if(styleList===false)return target;if(useComputedStyles){var computed=node.ownerDocument.defaultView.getComputedStyle(node,null);var keysArray=styleList===true?computed:Object.keys(styleList)}else{var computed=isDefined(node.currentStyle)?node.currentStyle:node.style;var keysArray=styleList===true?Object.keys(computed):Object.keys(styleList)}for(var i=0,l=keysArray.length;i<l;i++){var key=keysArray[i];var def=styleList===true||styleList[key];if(def===false||!isDefined(def))continue;var value=useComputedStyles?computed.getPropertyValue(key):computed[key];if(typeof value!=="string"||value==="")continue;if(def===true||value!==def){target[key]=value}}return target}exports["default"]=computedStyles;module.exports=exports["default"]},{}],3:[function(require,module,exports){var saveAs=saveAs||function(view){"use strict";if(typeof view==="undefined"||typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var doc=view.document,get_URL=function(){return view.URL||view.webkitURL||view},save_link=doc.createElementNS("http://www.w3.org/1999/xhtml","a"),can_use_save_link="download"in save_link,click=function(node){var event=new MouseEvent("click");node.dispatchEvent(event)},is_safari=/constructor/i.test(view.HTMLElement)||view.safari,is_chrome_ios=/CriOS\/[\d]+/.test(navigator.userAgent),throw_outside=function(ex){(view.setImmediate||view.setTimeout)(function(){throw ex},0)},force_saveable_type="application/octet-stream",arbitrary_revoke_timeout=1e3*40,revoke=function(file){var revoker=function(){if(typeof file==="string"){get_URL().revokeObjectURL(file)}else{file.remove()}};setTimeout(revoker,arbitrary_revoke_timeout)},dispatch=function(filesaver,event_types,event){event_types=[].concat(event_types);var i=event_types.length;while(i--){var listener=filesaver["on"+event_types[i]];if(typeof listener==="function"){try{listener.call(filesaver,event||filesaver)}catch(ex){throw_outside(ex)}}}},auto_bom=function(blob){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)){return new Blob([String.fromCharCode(65279),blob],{type:blob.type})}return blob},FileSaver=function(blob,name,no_auto_bom){if(!no_auto_bom){blob=auto_bom(blob)}var filesaver=this,type=blob.type,force=type===force_saveable_type,object_url,dispatch_all=function(){dispatch(filesaver,"writestart progress write writeend".split(" "))},fs_error=function(){if((is_chrome_ios||force&&is_safari)&&view.FileReader){var reader=new FileReader;reader.onloadend=function(){var url=is_chrome_ios?reader.result:reader.result.replace(/^data:[^;]*;/,"data:attachment/file;");var popup=view.open(url,"_blank");if(!popup)view.location.href=url;url=undefined;filesaver.readyState=filesaver.DONE;dispatch_all()};reader.readAsDataURL(blob);filesaver.readyState=filesaver.INIT;return}if(!object_url){object_url=get_URL().createObjectURL(blob)}if(force){view.location.href=object_url}else{var opened=view.open(object_url,"_blank");if(!opened){view.location.href=object_url}}filesaver.readyState=filesaver.DONE;dispatch_all();revoke(object_url)};filesaver.readyState=filesaver.INIT;if(can_use_save_link){object_url=get_URL().createObjectURL(blob);setTimeout(function(){save_link.href=object_url;save_link.download=name;click(save_link);dispatch_all();revoke(object_url);filesaver.readyState=filesaver.DONE});return}fs_error()},FS_proto=FileSaver.prototype,saveAs=function(blob,name,no_auto_bom){return new FileSaver(blob,name||blob.name||"download",no_auto_bom)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(blob,name,no_auto_bom){name=name||blob.name||"download";if(!no_auto_bom){blob=auto_bom(blob)}return navigator.msSaveOrOpenBlob(blob,name)}}FS_proto.abort=function(){};FS_proto.readyState=FS_proto.INIT=0;FS_proto.WRITING=1;FS_proto.DONE=2;FS_proto.error=FS_proto.onwritestart=FS_proto.onprogress=FS_proto.onwrite=FS_proto.onabort=FS_proto.onerror=FS_proto.onwriteend=null;return saveAs}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!==null){define("FileSaver.js",function(){return saveAs})}},{}]},{},[1])(1)});


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
  3 | 	<head>
  4 | 		<meta charset="utf-8"/>
  5 | 		<title>DownloadSVG demo</title>
  6 | 		<style>
  7 | 			#left {
  8 | 				width: 33%;
  9 | 				float: left;
 10 | 			}
 11 | 			#right {
 12 | 				width: 66%;
 13 | 				float: right;
 14 | 			}
 15 | 			#right textarea {
 16 | 				width: 100%;
 17 | 				height: 80vh;
 18 | 			}
 19 | 			#puddle { fill: #9CDAF1; }
 20 | 			#shadow-legs { fill: #7DBBE6; }
 21 | 			#face { fill: #F4CBB2; }
 22 | 			#eyes { fill: #FFF; }
 23 | 			#face-features { fill: #AD5C51; }
 24 | 			#octo { fill: #C3E4D8; }
 25 | 			#drop { fill: #9CDAF1; }
 26 | 			#pupils { fill: url(#Gradient01); }
 27 | 			svg:hover #pupils { animation: flash 10s infinite linear; }
 28 | 
 29 | 			@keyframes flash {
 30 | 				0% { fill: red; }
 31 | 				50% { fill: yellow; }
 32 | 				100% { fill: red; }
 33 | 			}
 34 | 		</style>
 35 | 	</head>
 36 | <body>
 37 | 
 38 | 	<button id="getHTML">View HTML...</button>
 39 | 	<button id="cloneSvg">Clone as SVG...</button>
 40 | 	<button id="cloneAsUri">Clone as SVG URI...</button>
 41 | 	<button id="cloneAsPng">Clone as PNG URI...</button>
 42 | 	<button id="asSvg">Download as SVG...</button>
 43 |   <button id="asPng">Download as PNG...</button>
 44 | 	
 45 | 	<p></p>
 46 | 
 47 | 	<div>
 48 | 		<div id="right">
 49 | 			<div id="copyCat"></div>
 50 | 		</div>
 51 | 		<div id="left">
 52 | 			<svg id="octocat" title="octocat" xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 -1 379 334">
 53 | 				<defs>
 54 | 					<linearGradient id="Gradient01">
 55 | 						<stop offset="20%" stop-color="#39F"></stop>
 56 | 						<stop offset="90%" stop-color="#F3F"></stop>
 57 | 					</linearGradient>
 58 | 					<g id="shadow-legs">
 59 | 						<path d="m161.85 331.22v-26.5c0-3.422-.619-6.284-1.653-8.701 6.853 5.322 7.316 18.695 7.316 18.695v17.004c6.166.481 12.534.773 19.053.861l-.172-16.92c-.944-23.13-20.769-25.961-20.769-25.961-7.245-1.645-7.137 1.991-6.409 4.34-7.108-12.122-26.158-10.556-26.158-10.556-6.611 2.357-.475 6.607-.475 6.607 10.387 3.775 11.33 15.105 11.33 15.105v23.622c5.72.98 11.71 1.79 17.94 2.4z"></path>
 60 | 						<path d="m245.4 283.48s-19.053-1.566-26.16 10.559c.728-2.35.839-5.989-6.408-4.343 0 0-19.824 2.832-20.768 25.961l-.174 16.946c6.509-.025 12.876-.254 19.054-.671v-17.219s.465-13.373 7.316-18.695c-1.034 2.417-1.653 5.278-1.653 8.701v26.775c6.214-.544 12.211-1.279 17.937-2.188v-24.113s.944-11.33 11.33-15.105c0-.01 6.13-4.26-.48-6.62z"></path>
 61 | 					</g>
 62 | 					<g id="face-features">
 63 | 						<path id="pupils" d="m154.46 126.38 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z m94.42 0 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z"></path>
 64 | 						<circle id="nose" cx="188.5" cy="148.56" r="4.401"></circle>
 65 | 						<path id="mouth" d="m178.23 159.69c-.26-.738.128-1.545.861-1.805.737-.26 1.546.128 1.805.861 1.134 3.198 4.167 5.346 7.551 5.346s6.417-2.147 7.551-5.346c.26-.738 1.067-1.121 1.805-.861s1.121 1.067.862 1.805c-1.529 4.324-5.639 7.229-10.218 7.229s-8.68-2.89-10.21-7.22z"></path>
 66 | 					</g>
 67 | 				</defs>
 68 | 				<path id="puddle" d="m296.94 295.43c0 20.533-47.56 37.176-106.22 37.176-58.67 0-106.23-16.643-106.23-37.176s47.558-37.18 106.23-37.18c58.66 0 106.22 16.65 106.22 37.18z"></path>
 69 | 				<use xlink:href="#shadow-legs"></use>
 70 | 				<path id="cat" d="m378.18 141.32l.28-1.389c-31.162-6.231-63.141-6.294-82.487-5.49 3.178-11.451 4.134-24.627 4.134-39.32 0-21.073-7.917-37.931-20.77-50.759 2.246-7.25 5.246-23.351-2.996-43.963 0 0-14.541-4.617-47.431 17.396-12.884-3.22-26.596-4.81-40.328-4.81-15.109 0-30.376 1.924-44.615 5.83-33.94-23.154-48.923-18.411-48.923-18.411-9.78 24.457-3.733 42.566-1.896 47.063-11.495 12.406-18.513 28.243-18.513 47.659 0 14.658 1.669 27.808 5.745 39.237-19.511-.71-50.323-.437-80.373 5.572l.276 1.389c30.231-6.046 61.237-6.256 80.629-5.522.898 2.366 1.899 4.661 3.021 6.879-19.177.618-51.922 3.062-83.303 11.915l.387 1.36c31.629-8.918 64.658-11.301 83.649-11.882 11.458 21.358 34.048 35.152 74.236 39.484-5.704 3.833-11.523 10.349-13.881 21.374-7.773 3.718-32.379 12.793-47.142-12.599 0 0-8.264-15.109-24.082-16.292 0 0-15.344-.235-1.059 9.562 0 0 10.267 4.838 17.351 23.019 0 0 9.241 31.01 53.835 21.061v32.032s-.943 11.33-11.33 15.105c0 0-6.137 4.249.475 6.606 0 0 28.792 2.361 28.792-21.238v-34.929s-1.142-13.852 5.663-18.667v57.371s-.47 13.688-7.551 18.881c0 0-4.723 8.494 5.663 6.137 0 0 19.824-2.832 20.769-25.961l.449-58.06h4.765l.453 58.06c.943 23.129 20.768 25.961 20.768 25.961 10.383 2.357 5.663-6.137 5.663-6.137-7.08-5.193-7.551-18.881-7.551-18.881v-56.876c6.801 5.296 5.663 18.171 5.663 18.171v34.929c0 23.6 28.793 21.238 28.793 21.238 6.606-2.357.474-6.606.474-6.606-10.386-3.775-11.33-15.105-11.33-15.105v-45.786c0-17.854-7.518-27.309-14.87-32.3 42.859-4.25 63.426-18.089 72.903-39.591 18.773.516 52.557 2.803 84.873 11.919l.384-1.36c-32.131-9.063-65.692-11.408-84.655-11.96.898-2.172 1.682-4.431 2.378-6.755 19.25-.80 51.38-.79 82.66 5.46z"></path>
 71 | 				<path id="face" d="m258.19 94.132c9.231 8.363 14.631 18.462 14.631 29.343 0 50.804-37.872 52.181-84.585 52.181-46.721 0-84.589-7.035-84.589-52.181 0-10.809 5.324-20.845 14.441-29.174 15.208-13.881 40.946-6.531 70.147-6.531 29.07-.004 54.72-7.429 69.95 6.357z"></path>
 72 | 				<path id="eyes" d="m160.1 126.06 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z m94.43 0 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z"></path>
 73 | 				<use xlink:href="#face-features"></use>
 74 | 				<path id="octo" d="m80.641 179.82 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m8.5 4.72 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.193 6.14 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m4.72 7.08 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.188 6.61 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m7.09 5.66 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.91 3.78 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.87 0 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m10.01 -1.64 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z"></path>
 75 | 				<path id="drop" d="m69.369 186.12l-3.066 10.683s-.8 3.861 2.84 4.546c3.8-.074 3.486-3.627 3.223-4.781z"></path>
 76 | 			</svg>
 77 | 		</div>
 78 | 	</div>
 79 | 
 80 |   <!-- these are included to test maximum cross browser compatability, see https://github.com/Hypercubed/svgsaver/wiki/Compatibility-Chart -->
 81 |   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.13/es5-shim.js"></script>
 82 |   <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.13/es5-sham.js"></script>
 83 |   <script src="//rawgit.com/eligrey/Blob.js/master/Blob.js"></script>
 84 |   <script src="//rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
 85 |   <script src="//rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
 86 | 	<script src="../browser.min.js"></script>
 87 | 	<script>
 88 |     var svgsaver = new SvgSaver();
 89 |     var octocat = document.querySelector('#octocat');
 90 | 		var copycat = document.querySelector('#copyCat');
 91 | 
 92 | 		var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 93 | 
 94 | 		addClick('#cloneSvg', function() {
 95 | 			cleanCopyCat();
 96 | 			copycat.appendChild(svgsaver.cloneSVG(octocat));
 97 | 		});
 98 | 		addClick('#getHTML', function() {
 99 | 			cleanCopyCat();
100 | 			copycat.innerHTML = '<textarea>' + svgsaver.getHTML(octocat) + '</textarea>';
101 | 		});
102 | 		addClick('#asSvg', function() {
103 | 			svgsaver.asSvg(octocat);
104 | 		});
105 |     addClick('#asPng', function() {
106 |       svgsaver.asPng(octocat);
107 |     });
108 | 		addClick('#asPng', function() {
109 |       svgsaver.asPng(octocat);
110 |     });
111 | 		addClick('#cloneAsPng', function() {
112 | 			cleanCopyCat();
113 |       svgsaver.getPngUri(octocat, function (data) {
114 | 				copycat.innerHTML = '<img src="' + data + '"></img>';
115 | 			});
116 |     });
117 | 		addClick('#cloneAsUri', function() {
118 | 			cleanCopyCat();
119 | 			copycat.innerHTML = '<img src="' + svgsaver.getUri(octocat) + '"></img>';
120 |     });
121 | 
122 | 		if (isIE11) {
123 | 			document.querySelector('#asPng').disabled = true;
124 | 			document.querySelector('#cloneAsPng').disabled = true;
125 | 		}
126 | 
127 | 		function addClick(el, cb) {
128 | 			document.querySelector(el).addEventListener('click', cb);
129 | 		}
130 | 
131 | 		function cleanCopyCat() {
132 | 			var myNode = copycat;
133 | 			while (myNode.firstChild) {
134 | 			  myNode.removeChild(myNode.firstChild);
135 | 			}
136 | 		}
137 | 	</script>
138 | </body>
139 | </html>
140 | 


--------------------------------------------------------------------------------
/demo/jsdom-demo.js:
--------------------------------------------------------------------------------
 1 | var jsdom = require('jsdom');
 2 | var SvgSaver = require('../');
 3 | 
 4 | const octocatText = `
 5 | 	<style>
 6 | 		#puddle { fill: #9CDAF1; }
 7 | 		#shadow-legs { fill: #7DBBE6; }
 8 | 		#face { fill: #F4CBB2; }
 9 | 		#eyes { fill: #FFF; }
10 | 		#face-features { fill: #AD5C51; }
11 | 		#octo { fill: #C3E4D8; }
12 | 		#drop { fill: #9CDAF1; }
13 | 	</style>
14 | 	<svg id="octocat" title="octocat" xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 -1 379 334">
15 | 	 <path id="puddle" d="m296.94 295.43c0 20.533-47.56 37.176-106.22 37.176-58.67 0-106.23-16.643-106.23-37.176s47.558-37.18 106.23-37.18c58.66 0 106.22 16.65 106.22 37.18z"/>
16 | 	 <g id="shadow-legs">
17 | 		<path d="m161.85 331.22v-26.5c0-3.422-.619-6.284-1.653-8.701 6.853 5.322 7.316 18.695 7.316 18.695v17.004c6.166.481 12.534.773 19.053.861l-.172-16.92c-.944-23.13-20.769-25.961-20.769-25.961-7.245-1.645-7.137 1.991-6.409 4.34-7.108-12.122-26.158-10.556-26.158-10.556-6.611 2.357-.475 6.607-.475 6.607 10.387 3.775 11.33 15.105 11.33 15.105v23.622c5.72.98 11.71 1.79 17.94 2.4z"/>
18 | 		<path d="m245.4 283.48s-19.053-1.566-26.16 10.559c.728-2.35.839-5.989-6.408-4.343 0 0-19.824 2.832-20.768 25.961l-.174 16.946c6.509-.025 12.876-.254 19.054-.671v-17.219s.465-13.373 7.316-18.695c-1.034 2.417-1.653 5.278-1.653 8.701v26.775c6.214-.544 12.211-1.279 17.937-2.188v-24.113s.944-11.33 11.33-15.105c0-.01 6.13-4.26-.48-6.62z"/>
19 | 	 </g>
20 | 	 <path id="cat" d="m378.18 141.32l.28-1.389c-31.162-6.231-63.141-6.294-82.487-5.49 3.178-11.451 4.134-24.627 4.134-39.32 0-21.073-7.917-37.931-20.77-50.759 2.246-7.25 5.246-23.351-2.996-43.963 0 0-14.541-4.617-47.431 17.396-12.884-3.22-26.596-4.81-40.328-4.81-15.109 0-30.376 1.924-44.615 5.83-33.94-23.154-48.923-18.411-48.923-18.411-9.78 24.457-3.733 42.566-1.896 47.063-11.495 12.406-18.513 28.243-18.513 47.659 0 14.658 1.669 27.808 5.745 39.237-19.511-.71-50.323-.437-80.373 5.572l.276 1.389c30.231-6.046 61.237-6.256 80.629-5.522.898 2.366 1.899 4.661 3.021 6.879-19.177.618-51.922 3.062-83.303 11.915l.387 1.36c31.629-8.918 64.658-11.301 83.649-11.882 11.458 21.358 34.048 35.152 74.236 39.484-5.704 3.833-11.523 10.349-13.881 21.374-7.773 3.718-32.379 12.793-47.142-12.599 0 0-8.264-15.109-24.082-16.292 0 0-15.344-.235-1.059 9.562 0 0 10.267 4.838 17.351 23.019 0 0 9.241 31.01 53.835 21.061v32.032s-.943 11.33-11.33 15.105c0 0-6.137 4.249.475 6.606 0 0 28.792 2.361 28.792-21.238v-34.929s-1.142-13.852 5.663-18.667v57.371s-.47 13.688-7.551 18.881c0 0-4.723 8.494 5.663 6.137 0 0 19.824-2.832 20.769-25.961l.449-58.06h4.765l.453 58.06c.943 23.129 20.768 25.961 20.768 25.961 10.383 2.357 5.663-6.137 5.663-6.137-7.08-5.193-7.551-18.881-7.551-18.881v-56.876c6.801 5.296 5.663 18.171 5.663 18.171v34.929c0 23.6 28.793 21.238 28.793 21.238 6.606-2.357.474-6.606.474-6.606-10.386-3.775-11.33-15.105-11.33-15.105v-45.786c0-17.854-7.518-27.309-14.87-32.3 42.859-4.25 63.426-18.089 72.903-39.591 18.773.516 52.557 2.803 84.873 11.919l.384-1.36c-32.131-9.063-65.692-11.408-84.655-11.96.898-2.172 1.682-4.431 2.378-6.755 19.25-.80 51.38-.79 82.66 5.46z"/>
21 | 	 <path id="face" d="m258.19 94.132c9.231 8.363 14.631 18.462 14.631 29.343 0 50.804-37.872 52.181-84.585 52.181-46.721 0-84.589-7.035-84.589-52.181 0-10.809 5.324-20.845 14.441-29.174 15.208-13.881 40.946-6.531 70.147-6.531 29.07-.004 54.72-7.429 69.95 6.357z"/>
22 | 	 <path id="eyes" d="m160.1 126.06 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z m94.43 0 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z"/>
23 | 	 <g id="face-features">
24 | 	 <path id="pupils" d="m154.46 126.38 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z m94.42 0 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z"/>
25 | 	 <circle id="nose" cx="188.5" cy="148.56" r="4.401"/>
26 | 	 <path id="mouth" d="m178.23 159.69c-.26-.738.128-1.545.861-1.805.737-.26 1.546.128 1.805.861 1.134 3.198 4.167 5.346 7.551 5.346s6.417-2.147 7.551-5.346c.26-.738 1.067-1.121 1.805-.861s1.121 1.067.862 1.805c-1.529 4.324-5.639 7.229-10.218 7.229s-8.68-2.89-10.21-7.22z"/>
27 | 	 </g>
28 | 	 <path id="octo" d="m80.641 179.82 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m8.5 4.72 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.193 6.14 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m4.72 7.08 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.188 6.61 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m7.09 5.66 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.91 3.78 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.87 0 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m10.01 -1.64 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z"/>
29 | 	 <path id="drop" d="m69.369 186.12l-3.066 10.683s-.8 3.861 2.84 4.546c3.8-.074 3.486-3.627 3.223-4.781z"/>
30 | 	</svg>`;
31 | 
32 | jsdom.env(
33 |   octocatText,
34 | 	['http://code.jquery.com/jquery.js'],
35 |   function (_err, window) {
36 |     global.window = window;
37 |     const octocat = window.document.querySelector('#octocat');
38 | 
39 |     const svgSaver = new SvgSaver();
40 | 
41 |     console.log(svgSaver.getHTML(octocat));
42 |   }
43 | );
44 | 


--------------------------------------------------------------------------------
/demo/phantomjs-demo.js:
--------------------------------------------------------------------------------
 1 | /* global phantom */
 2 | 'use strict';
 3 | 
 4 | var SvgSaver = require('../');
 5 | 
 6 | var octocatText = '\n\t<style>\n\t\t#puddle { fill: #9CDAF1; }\n\t\t#shadow-legs { fill: #7DBBE6; }\n\t\t#face { fill: #F4CBB2; }\n\t\t#eyes { fill: #FFF; }\n\t\t#face-features { fill: #AD5C51; }\n\t\t#octo { fill: #C3E4D8; }\n\t\t#drop { fill: #9CDAF1; }\n\t</style>\n\t<svg id="octocat" title="octocat" xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 -1 379 334">\n\t <path id="puddle" d="m296.94 295.43c0 20.533-47.56 37.176-106.22 37.176-58.67 0-106.23-16.643-106.23-37.176s47.558-37.18 106.23-37.18c58.66 0 106.22 16.65 106.22 37.18z"/>\n\t <g id="shadow-legs">\n\t\t<path d="m161.85 331.22v-26.5c0-3.422-.619-6.284-1.653-8.701 6.853 5.322 7.316 18.695 7.316 18.695v17.004c6.166.481 12.534.773 19.053.861l-.172-16.92c-.944-23.13-20.769-25.961-20.769-25.961-7.245-1.645-7.137 1.991-6.409 4.34-7.108-12.122-26.158-10.556-26.158-10.556-6.611 2.357-.475 6.607-.475 6.607 10.387 3.775 11.33 15.105 11.33 15.105v23.622c5.72.98 11.71 1.79 17.94 2.4z"/>\n\t\t<path d="m245.4 283.48s-19.053-1.566-26.16 10.559c.728-2.35.839-5.989-6.408-4.343 0 0-19.824 2.832-20.768 25.961l-.174 16.946c6.509-.025 12.876-.254 19.054-.671v-17.219s.465-13.373 7.316-18.695c-1.034 2.417-1.653 5.278-1.653 8.701v26.775c6.214-.544 12.211-1.279 17.937-2.188v-24.113s.944-11.33 11.33-15.105c0-.01 6.13-4.26-.48-6.62z"/>\n\t </g>\n\t <path id="cat" d="m378.18 141.32l.28-1.389c-31.162-6.231-63.141-6.294-82.487-5.49 3.178-11.451 4.134-24.627 4.134-39.32 0-21.073-7.917-37.931-20.77-50.759 2.246-7.25 5.246-23.351-2.996-43.963 0 0-14.541-4.617-47.431 17.396-12.884-3.22-26.596-4.81-40.328-4.81-15.109 0-30.376 1.924-44.615 5.83-33.94-23.154-48.923-18.411-48.923-18.411-9.78 24.457-3.733 42.566-1.896 47.063-11.495 12.406-18.513 28.243-18.513 47.659 0 14.658 1.669 27.808 5.745 39.237-19.511-.71-50.323-.437-80.373 5.572l.276 1.389c30.231-6.046 61.237-6.256 80.629-5.522.898 2.366 1.899 4.661 3.021 6.879-19.177.618-51.922 3.062-83.303 11.915l.387 1.36c31.629-8.918 64.658-11.301 83.649-11.882 11.458 21.358 34.048 35.152 74.236 39.484-5.704 3.833-11.523 10.349-13.881 21.374-7.773 3.718-32.379 12.793-47.142-12.599 0 0-8.264-15.109-24.082-16.292 0 0-15.344-.235-1.059 9.562 0 0 10.267 4.838 17.351 23.019 0 0 9.241 31.01 53.835 21.061v32.032s-.943 11.33-11.33 15.105c0 0-6.137 4.249.475 6.606 0 0 28.792 2.361 28.792-21.238v-34.929s-1.142-13.852 5.663-18.667v57.371s-.47 13.688-7.551 18.881c0 0-4.723 8.494 5.663 6.137 0 0 19.824-2.832 20.769-25.961l.449-58.06h4.765l.453 58.06c.943 23.129 20.768 25.961 20.768 25.961 10.383 2.357 5.663-6.137 5.663-6.137-7.08-5.193-7.551-18.881-7.551-18.881v-56.876c6.801 5.296 5.663 18.171 5.663 18.171v34.929c0 23.6 28.793 21.238 28.793 21.238 6.606-2.357.474-6.606.474-6.606-10.386-3.775-11.33-15.105-11.33-15.105v-45.786c0-17.854-7.518-27.309-14.87-32.3 42.859-4.25 63.426-18.089 72.903-39.591 18.773.516 52.557 2.803 84.873 11.919l.384-1.36c-32.131-9.063-65.692-11.408-84.655-11.96.898-2.172 1.682-4.431 2.378-6.755 19.25-.80 51.38-.79 82.66 5.46z"/>\n\t <path id="face" d="m258.19 94.132c9.231 8.363 14.631 18.462 14.631 29.343 0 50.804-37.872 52.181-84.585 52.181-46.721 0-84.589-7.035-84.589-52.181 0-10.809 5.324-20.845 14.441-29.174 15.208-13.881 40.946-6.531 70.147-6.531 29.07-.004 54.72-7.429 69.95 6.357z"/>\n\t <path id="eyes" d="m160.1 126.06 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z m94.43 0 c0 13.994-7.88 25.336-17.6 25.336-9.72 0-17.6-11.342-17.6-25.336 0-13.992 7.88-25.33 17.6-25.33 9.72.01 17.6 11.34 17.6 25.33z"/>\n\t <g id="face-features">\n\t <path id="pupils" d="m154.46 126.38 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z m94.42 0 c0 9.328-5.26 16.887-11.734 16.887s-11.733-7.559-11.733-16.887c0-9.331 5.255-16.894 11.733-16.894 6.47 0 11.73 7.56 11.73 16.89z"/>\n\t <circle id="nose" cx="188.5" cy="148.56" r="4.401"/>\n\t <path id="mouth" d="m178.23 159.69c-.26-.738.128-1.545.861-1.805.737-.26 1.546.128 1.805.861 1.134 3.198 4.167 5.346 7.551 5.346s6.417-2.147 7.551-5.346c.26-.738 1.067-1.121 1.805-.861s1.121 1.067.862 1.805c-1.529 4.324-5.639 7.229-10.218 7.229s-8.68-2.89-10.21-7.22z"/>\n\t </g>\n\t <path id="octo" d="m80.641 179.82 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m8.5 4.72 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.193 6.14 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m4.72 7.08 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m5.188 6.61 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m7.09 5.66 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.91 3.78 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m9.87 0 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z m10.01 -1.64 c0 1.174-1.376 2.122-3.07 2.122-1.693 0-3.07-.948-3.07-2.122 0-1.175 1.377-2.127 3.07-2.127 1.694 0 3.07.95 3.07 2.13z"/>\n\t <path id="drop" d="m69.369 186.12l-3.066 10.683s-.8 3.861 2.84 4.546c3.8-.074 3.486-3.627 3.223-4.781z"/>\n\t</svg>';
 7 | 
 8 | var pg = document.createElement('div');
 9 | document.body.appendChild(pg);
10 | pg.innerHTML = octocatText;
11 | 
12 | var octocat = window.document.querySelector('#octocat');
13 | var svgSaver = new SvgSaver();
14 | 
15 | console.log(svgSaver.getHTML(octocat));
16 | phantom.exit();
17 | 


--------------------------------------------------------------------------------
/esdoc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "source": "./src",
3 |   "destination": "./esdoc",
4 | 	"test": {
5 | 		"type": "mocha",
6 | 		"source": "./test"
7 | 	}
8 | }
9 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./lib/svgsaver');
2 | 


--------------------------------------------------------------------------------
/lib/svgsaver.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | Object.defineProperty(exports, '__esModule', {
  4 |   value: true
  5 | });
  6 | 
  7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  8 | 
  9 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 10 | 
 11 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 12 | 
 13 | var _computedStyles = require('computed-styles');
 14 | 
 15 | var _computedStyles2 = _interopRequireDefault(_computedStyles);
 16 | 
 17 | var _fileSaver = require('file-saver');
 18 | 
 19 | var _fileSaver2 = _interopRequireDefault(_fileSaver);
 20 | 
 21 | var svgStyles = { // Whitelist of CSS styles and default values
 22 |   'alignment-baseline': 'auto',
 23 |   'baseline-shift': 'baseline',
 24 |   'clip': 'auto',
 25 |   'clip-path': 'none',
 26 |   'clip-rule': 'nonzero',
 27 |   'color': 'rgb(51, 51, 51)',
 28 |   'color-interpolation': 'srgb',
 29 |   'color-interpolation-filters': 'linearrgb',
 30 |   'color-profile': 'auto',
 31 |   'color-rendering': 'auto',
 32 |   'cursor': 'auto',
 33 |   'direction': 'ltr',
 34 |   'display': 'inline',
 35 |   'dominant-baseline': 'auto',
 36 |   'enable-background': '',
 37 |   'fill': 'rgb(0, 0, 0)',
 38 |   'fill-opacity': '1',
 39 |   'fill-rule': 'nonzero',
 40 |   'filter': 'none',
 41 |   'flood-color': 'rgb(0, 0, 0)',
 42 |   'flood-opacity': '1',
 43 |   'font': '',
 44 |   'font-family': 'normal',
 45 |   'font-size': 'medium',
 46 |   'font-size-adjust': 'auto',
 47 |   'font-stretch': 'normal',
 48 |   'font-style': 'normal',
 49 |   'font-variant': 'normal',
 50 |   'font-weight': '400',
 51 |   'glyph-orientation-horizontal': '0deg',
 52 |   'glyph-orientation-vertical': 'auto',
 53 |   'image-rendering': 'auto',
 54 |   'kerning': 'auto',
 55 |   'letter-spacing': '0',
 56 |   'lighting-color': 'rgb(255, 255, 255)',
 57 |   'marker': '',
 58 |   'marker-end': 'none',
 59 |   'marker-mid': 'none',
 60 |   'marker-start': 'none',
 61 |   'mask': 'none',
 62 |   'opacity': '1',
 63 |   'overflow': 'visible',
 64 |   'paint-order': 'fill',
 65 |   'pointer-events': 'auto',
 66 |   'shape-rendering': 'auto',
 67 |   'stop-color': 'rgb(0, 0, 0)',
 68 |   'stop-opacity': '1',
 69 |   'stroke': 'none',
 70 |   'stroke-dasharray': 'none',
 71 |   'stroke-dashoffset': '0',
 72 |   'stroke-linecap': 'butt',
 73 |   'stroke-linejoin': 'miter',
 74 |   'stroke-miterlimit': '4',
 75 |   'stroke-opacity': '1',
 76 |   'stroke-width': '1',
 77 |   'text-anchor': 'start',
 78 |   'text-decoration': 'none',
 79 |   'text-rendering': 'auto',
 80 |   'unicode-bidi': 'normal',
 81 |   'visibility': 'visible',
 82 |   'word-spacing': '0px',
 83 |   'writing-mode': 'lr-tb'
 84 | };
 85 | 
 86 | var svgAttrs = [// white list of attributes
 87 | 'id', 'xml: base', 'xml: lang', 'xml: space', // Core
 88 | 'height', 'result', 'width', 'x', 'y', // Primitive
 89 | 'xlink: href', // Xlink attribute
 90 | 'href', 'style', 'class', 'd', 'pathLength', // Path
 91 | 'x', 'y', 'dx', 'dy', 'glyphRef', 'format', 'x1', 'y1', 'x2', 'y2', 'rotate', 'textLength', 'cx', 'cy', 'r', 'rx', 'ry', 'fx', 'fy', 'width', 'height', 'refX', 'refY', 'orient', 'markerUnits', 'markerWidth', 'markerHeight', 'maskUnits', 'transform', 'viewBox', 'version', // Container
 92 | 'preserveAspectRatio', 'xmlns', 'points', // Polygons
 93 | 'offset', 'xlink:href'];
 94 | 
 95 | // http://www.w3.org/TR/SVG/propidx.html
 96 | // via https://github.com/svg/svgo/blob/master/plugins/_collections.js
 97 | var inheritableAttrs = ['clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cursor', 'direction', 'fill', 'fill-opacity', 'fill-rule', 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'image-rendering', 'kerning', 'letter-spacing', 'marker', 'marker-end', 'marker-mid', 'marker-start', 'pointer-events', 'shape-rendering', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-rendering', 'transform', 'visibility', 'white-space', 'word-spacing', 'writing-mode'];
 98 | 
 99 | /* Some simple utilities */
100 | 
101 | var isFunction = function isFunction(a) {
102 |   return typeof a === 'function';
103 | };
104 | var isDefined = function isDefined(a) {
105 |   return typeof a !== 'undefined';
106 | };
107 | var isUndefined = function isUndefined(a) {
108 |   return typeof a === 'undefined';
109 | };
110 | var isObject = function isObject(a) {
111 |   return a !== null && typeof a === 'object';
112 | };
113 | 
114 | // from https://github.com/npm-dom/is-dom/blob/master/index.js
115 | function isNode(val) {
116 |   if (!isObject(val)) {
117 |     return false;
118 |   }
119 |   if (isDefined(window) && isObject(window.Node)) {
120 |     return val instanceof window.Node;
121 |   }
122 |   return typeof val.nodeType === 'number' && typeof val.nodeName === 'string';
123 | }
124 | 
125 | /* Some utilities for cloning SVGs with inline styles */
126 | // Removes attributes that are not valid for SVGs
127 | function cleanAttrs(el, attrs, styles) {
128 |   // attrs === false - remove all, attrs === true - allow all
129 |   if (attrs === true) {
130 |     return;
131 |   }
132 | 
133 |   Array.prototype.slice.call(el.attributes).forEach(function (attr) {
134 |     // remove if it is not style nor on attrs  whitelist
135 |     // keeping attributes that are also styles because attributes override
136 |     if (attr.specified) {
137 |       if (attrs === '' || attrs === false || isUndefined(styles[attr.name]) && attrs.indexOf(attr.name) < 0) {
138 |         el.removeAttribute(attr.name);
139 |       }
140 |     }
141 |   });
142 | }
143 | 
144 | function cleanStyle(tgt, parentStyles) {
145 |   parentStyles = parentStyles || tgt.parentNode.style;
146 |   inheritableAttrs.forEach(function (key) {
147 |     if (tgt.style[key] === parentStyles[key]) {
148 |       tgt.style.removeProperty(key);
149 |     }
150 |   });
151 | }
152 | 
153 | function domWalk(src, tgt, down, up) {
154 |   down(src, tgt);
155 |   var children = src.childNodes;
156 |   for (var i = 0; i < children.length; i++) {
157 |     domWalk(children[i], tgt.childNodes[i], down, up);
158 |   }
159 |   up(src, tgt);
160 | }
161 | 
162 | // Clones an SVGElement, copies approprate atttributes and styles.
163 | function cloneSvg(src, attrs, styles) {
164 |   var clonedSvg = src.cloneNode(true);
165 | 
166 |   domWalk(src, clonedSvg, function (src, tgt) {
167 |     if (tgt.style) {
168 |       (0, _computedStyles2['default'])(src, tgt.style, styles);
169 |     }
170 |   }, function (src, tgt) {
171 |     if (tgt.style && tgt.parentNode) {
172 |       cleanStyle(tgt);
173 |     }
174 |     if (tgt.attributes) {
175 |       cleanAttrs(tgt, attrs, styles);
176 |     }
177 |   });
178 | 
179 |   return clonedSvg;
180 | }
181 | 
182 | /* global Image, MouseEvent */
183 | 
184 | /* Some simple utilities for saving SVGs, including an alternative to saveAs */
185 | 
186 | // detection
187 | var DownloadAttributeSupport = typeof document !== 'undefined' && 'download' in document.createElement('a') && typeof MouseEvent === 'function';
188 | 
189 | function saveUri(uri, name) {
190 |   if (DownloadAttributeSupport) {
191 |     var dl = document.createElement('a');
192 |     dl.setAttribute('href', uri);
193 |     dl.setAttribute('download', name);
194 |     // firefox doesn't support `.click()`...
195 |     // from https://github.com/sindresorhus/multi-download/blob/gh-pages/index.js
196 |     dl.dispatchEvent(new MouseEvent('click'));
197 |     return true;
198 |   } else if (typeof window !== 'undefined') {
199 |     window.open(uri, '_blank', '');
200 |     return true;
201 |   }
202 | 
203 |   return false;
204 | }
205 | 
206 | function createCanvas(uri, name, cb) {
207 |   var canvas = document.createElement('canvas');
208 |   var context = canvas.getContext('2d');
209 | 
210 |   var image = new Image();
211 |   image.onload = function () {
212 |     canvas.width = image.width;
213 |     canvas.height = image.height;
214 |     context.drawImage(image, 0, 0);
215 | 
216 |     cb(canvas);
217 |   };
218 |   image.src = uri;
219 |   return true;
220 | }
221 | 
222 | function savePng(uri, name) {
223 |   return createCanvas(uri, name, function (canvas) {
224 |     if (isDefined(canvas.toBlob)) {
225 |       canvas.toBlob(function (blob) {
226 |         _fileSaver2['default'].saveAs(blob, name);
227 |       });
228 |     } else {
229 |       saveUri(canvas.toDataURL('image/png'), name);
230 |     }
231 |   });
232 | }
233 | 
234 | /* global Blob */
235 | 
236 | var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
237 | 
238 | // inheritable styles may be overridden by parent, always copy for now
239 | inheritableAttrs.forEach(function (k) {
240 |   if (k in svgStyles) {
241 |     svgStyles[k] = true;
242 |   }
243 | });
244 | 
245 | var SvgSaver = (function () {
246 |   _createClass(SvgSaver, null, [{
247 |     key: 'getSvg',
248 |     value: function getSvg(el) {
249 |       if (isUndefined(el) || el === '') {
250 |         el = document.body.querySelector('svg');
251 |       } else if (typeof el === 'string') {
252 |         el = document.body.querySelector(el);
253 |       }
254 |       if (el && el.tagName !== 'svg') {
255 |         el = el.querySelector('svg');
256 |       }
257 |       if (!isNode(el)) {
258 |         throw new Error('svgsaver: Can\'t find an svg element');
259 |       }
260 |       return el;
261 |     }
262 |   }, {
263 |     key: 'getFilename',
264 |     value: function getFilename(el, filename, ext) {
265 |       if (!filename || filename === '') {
266 |         filename = (el.getAttribute('title') || 'untitled') + '.' + ext;
267 |       }
268 |       return encodeURI(filename);
269 |     }
270 | 
271 |     /**
272 |     * SvgSaver constructor.
273 |     * @constructs SvgSaver
274 |     * @api public
275 |     *
276 |     * @example
277 |     * var svgsaver = new SvgSaver();                      // creates a new instance
278 |     * var svg = document.querySelector('#mysvg');         // find the SVG element
279 |     * svgsaver.asSvg(svg);                                // save as SVG
280 |     */
281 |   }]);
282 | 
283 |   function SvgSaver() {
284 |     var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
285 | 
286 |     var attrs = _ref.attrs;
287 |     var styles = _ref.styles;
288 | 
289 |     _classCallCheck(this, SvgSaver);
290 | 
291 |     this.attrs = attrs === undefined ? svgAttrs : attrs;
292 |     this.styles = styles === undefined ? svgStyles : styles;
293 |   }
294 | 
295 |   /**
296 |   * Return the cloned SVG after cleaning
297 |   *
298 |   * @param {SVGElement} el The element to copy.
299 |   * @returns {SVGElement} SVG text after cleaning
300 |   * @api public
301 |   */
302 | 
303 |   _createClass(SvgSaver, [{
304 |     key: 'cloneSVG',
305 |     value: function cloneSVG(el) {
306 |       el = SvgSaver.getSvg(el);
307 |       var svg = cloneSvg(el, this.attrs, this.styles);
308 | 
309 |       svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
310 |       svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
311 |       svg.setAttribute('version', 1.1);
312 | 
313 |       // height and width needed to download in FireFox
314 |       svg.setAttribute('width', svg.getAttribute('width') || '500');
315 |       svg.setAttribute('height', svg.getAttribute('height') || '900');
316 | 
317 |       return svg;
318 |     }
319 | 
320 |     /**
321 |     * Return the SVG HTML text after cleaning
322 |     *
323 |     * @param {SVGElement} el The element to copy.
324 |     * @returns {String} SVG text after cleaning
325 |     * @api public
326 |     */
327 |   }, {
328 |     key: 'getHTML',
329 |     value: function getHTML(el) {
330 |       var svg = this.cloneSVG(el);
331 | 
332 |       var html = svg.outerHTML;
333 |       if (html) {
334 |         return html;
335 |       }
336 | 
337 |       // see http://stackoverflow.com/questions/19610089/unwanted-namespaces-on-svg-markup-when-using-xmlserializer-in-javascript-with-ie
338 |       svg.removeAttribute('xmlns');
339 |       svg.removeAttribute('xmlns:xlink');
340 | 
341 |       svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
342 |       svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
343 | 
344 |       return new window.XMLSerializer().serializeToString(svg);
345 |     }
346 | 
347 |     /**
348 |     * Return the SVG, after cleaning, as a text/xml Blob
349 |     *
350 |     * @param {SVGElement} el The element to copy.
351 |     * @returns {Blog} SVG as a text/xml Blob
352 |     * @api public
353 |     */
354 |   }, {
355 |     key: 'getBlob',
356 |     value: function getBlob(el) {
357 |       var html = this.getHTML(el);
358 |       return new Blob([html], { type: 'text/xml' });
359 |     }
360 | 
361 |     /**
362 |     * Return the SVG, after cleaning, as a image/svg+xml;base64 URI encoded string
363 |     *
364 |     * @param {SVGElement} el The element to copy.
365 |     * @returns {String} SVG as image/svg+xml;base64 URI encoded string
366 |     * @api public
367 |     */
368 |   }, {
369 |     key: 'getUri',
370 |     value: function getUri(el) {
371 |       var html = encodeURIComponent(this.getHTML(el));
372 |       if (isDefined(window.btoa)) {
373 |         // see http://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
374 |         return 'data:image/svg+xml;base64,' + window.btoa(unescape(html));
375 |       }
376 |       return 'data:image/svg+xml,' + html;
377 |     }
378 | 
379 |     /**
380 |     * Saves the SVG as a SVG file using method compatible with the browser
381 |     *
382 |     * @param {SVGElement} el The element to copy.
383 |     * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.svg'
384 |     * @returns {SvgSaver} The SvgSaver instance
385 |     * @api public
386 |     */
387 |   }, {
388 |     key: 'asSvg',
389 |     value: function asSvg(el, filename) {
390 |       el = SvgSaver.getSvg(el);
391 |       filename = SvgSaver.getFilename(el, filename, 'svg');
392 |       if (isFunction(Blob)) {
393 |         return _fileSaver2['default'].saveAs(this.getBlob(el), filename);
394 |       }
395 |       return saveUri(this.getUri(el), filename);
396 |     }
397 | 
398 |     /**
399 |     * Gets the SVG as a PNG data URI.
400 |     *
401 |     * @param {SVGElement} el The element to copy.
402 |     * @param {Function} cb Call back called with the PNG data uri.
403 |     * @api public
404 |     */
405 |   }, {
406 |     key: 'getPngUri',
407 |     value: function getPngUri(el, cb) {
408 |       if (isIE11) {
409 |         console.error('svgsaver: getPngUri not supported on IE11');
410 |       }
411 |       el = SvgSaver.getSvg(el);
412 |       var filename = SvgSaver.getFilename(el, null, 'png');
413 |       return createCanvas(this.getUri(el), filename, function (canvas) {
414 |         cb(canvas.toDataURL('image/png'));
415 |       });
416 |     }
417 | 
418 |     /**
419 |     * Saves the SVG as a PNG file using method compatible with the browser
420 |     *
421 |     * @param {SVGElement} el The element to copy.
422 |     * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.png'
423 |     * @returns {SvgSaver} The SvgSaver instance
424 |     * @api public
425 |     */
426 |   }, {
427 |     key: 'asPng',
428 |     value: function asPng(el, filename) {
429 |       if (isIE11) {
430 |         console.error('svgsaver: asPng not supported on IE11');
431 |       }
432 |       el = SvgSaver.getSvg(el);
433 |       filename = SvgSaver.getFilename(el, filename, 'png');
434 |       return savePng(this.getUri(el), filename);
435 |     }
436 |   }]);
437 | 
438 |   return SvgSaver;
439 | })();
440 | 
441 | exports['default'] = SvgSaver;
442 | module.exports = exports['default'];
443 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svgsaver",
 3 |   "version": "0.9.0",
 4 |   "description": "download an SVG element with css styles",
 5 |   "main": "lib/svgsaver.js",
 6 |   "jsnext:main": "src/svgsaver.js",
 7 |   "scripts": {
 8 |     "rollup": "rollup ./src/index.js -e copy-styles | babel -o ./lib/svgsaver.js",
 9 |     "browserify": "browserify ./lib/svgsaver.js -o browser.js -s SvgSaver",
10 |     "uglify": "uglifyjs browser.js -o browser.min.js",
11 |     "test": "npm run check && npm run zuul:phantom",
12 |     "compile": "npm run rollup && npm run browserify && npm run uglify",
13 |     "build": "npm run compile && npm run jsdoc2md",
14 |     "lint": "semistandard test/*.js src/*.js",
15 |     "check": "npm run lint -s && dependency-check package.json --entry src",
16 |     "watch": "watch \"npm run build\" src/",
17 |     "watch:test": "watch \"npm test\" src/ test/",
18 |     "demo": "live-server --open=demo --ignore=src",
19 |     "start": "npm run demo & npm run watch",
20 |     "jsdoc2md": "jsdoc-parse ./src/svgsaver.js | dmd > API.md",
21 |     "version": "chg release -y && git add -A CHANGELOG.md",
22 |     "zuul:local": "zuul --local 9966 --ui tape -- test/svgsaver-spec.js",
23 |     "zuul:phantom": "zuul --phantom --ui tape -- test/svgsaver-spec.js | tap-spec",
24 |     "np": "npm run build && np"
25 |   },
26 |   "keywords": [
27 |     "svg",
28 |     "FileSaver",
29 |     "dom",
30 |     "css",
31 |     "png"
32 |   ],
33 |   "author": "J. Harshbarger",
34 |   "license": "MIT",
35 |   "devDependencies": {
36 |     "babel": "^5.8.38",
37 |     "babelify": "6",
38 |     "browserify": "13.0.0",
39 |     "dependency-check": "^2.5.1",
40 |     "dmd": "^1.4.2",
41 |     "jsdoc-parse": "^1.2.7",
42 |     "live-server": "^1.1.0",
43 |     "np": "^2.14.1",
44 |     "phantomjs-prebuilt": "^2.1.14",
45 |     "rollup": "^0.36.3",
46 |     "semistandard": "^9.1.0",
47 |     "tap-spec": "^4.1.0",
48 |     "tape": "^4.6.3",
49 |     "uglifyjs": "^2.4.10",
50 |     "watch": "^1.0.1",
51 |     "zuul": "^3.11.1"
52 |   },
53 |   "dependencies": {
54 |     "computed-styles": "^1.1.2",
55 |     "file-saver": "^1.3.3"
56 |   },
57 |   "directories": {
58 |     "test": "test"
59 |   },
60 |   "repository": {
61 |     "type": "git",
62 |     "url": "https://github.com/Hypercubed/svgsaver.git"
63 |   },
64 |   "bugs": {
65 |     "url": "https://github.com/Hypercubed/svgsaver/issues"
66 |   },
67 |   "homepage": "https://github.com/Hypercubed/svgsaver#readme"
68 | }
69 | 


--------------------------------------------------------------------------------
/src/clonesvg.js:
--------------------------------------------------------------------------------
 1 | /* Some utilities for cloning SVGs with inline styles */
 2 | import computedStyles from 'computed-styles';
 3 | import {isUndefined} from './utils';
 4 | import {inheritableAttrs} from './collection';
 5 | 
 6 | // Removes attributes that are not valid for SVGs
 7 | function cleanAttrs (el, attrs, styles) {  // attrs === false - remove all, attrs === true - allow all
 8 |   if (attrs === true) { return; }
 9 | 
10 |   Array.prototype.slice.call(el.attributes)
11 |     .forEach(function (attr) {
12 |       // remove if it is not style nor on attrs  whitelist
13 |       // keeping attributes that are also styles because attributes override
14 |       if (attr.specified) {
15 |         if (attrs === '' || attrs === false || (isUndefined(styles[attr.name]) && attrs.indexOf(attr.name) < 0)) {
16 |           el.removeAttribute(attr.name);
17 |         }
18 |       }
19 |     });
20 | }
21 | 
22 | function cleanStyle (tgt, parentStyles) {
23 |   parentStyles = parentStyles || tgt.parentNode.style;
24 |   inheritableAttrs.forEach(function (key) {
25 |     if (tgt.style[key] === parentStyles[key]) {
26 |       tgt.style.removeProperty(key);
27 |     }
28 |   });
29 | }
30 | 
31 | function domWalk (src, tgt, down, up) {
32 |   down(src, tgt);
33 |   const children = src.childNodes;
34 |   for (var i = 0; i < children.length; i++) {
35 |     domWalk(children[i], tgt.childNodes[i], down, up);
36 |   }
37 |   up(src, tgt);
38 | }
39 | 
40 | // Clones an SVGElement, copies approprate atttributes and styles.
41 | export function cloneSvg (src, attrs, styles) {
42 |   const clonedSvg = src.cloneNode(true);
43 | 
44 |   domWalk(src, clonedSvg, (src, tgt) => {
45 |     if (tgt.style) { computedStyles(src, tgt.style, styles); }
46 |   }, (src, tgt) => {
47 |     if (tgt.style && tgt.parentNode) { cleanStyle(tgt); }
48 |     if (tgt.attributes) { cleanAttrs(tgt, attrs, styles); }
49 |   });
50 | 
51 |   return clonedSvg;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/collection.js:
--------------------------------------------------------------------------------
  1 | export const svgStyles = {   // Whitelist of CSS styles and default values
  2 |   'alignment-baseline': 'auto',
  3 |   'baseline-shift': 'baseline',
  4 |   'clip': 'auto',
  5 |   'clip-path': 'none',
  6 |   'clip-rule': 'nonzero',
  7 |   'color': 'rgb(51, 51, 51)',
  8 |   'color-interpolation': 'srgb',
  9 |   'color-interpolation-filters': 'linearrgb',
 10 |   'color-profile': 'auto',
 11 |   'color-rendering': 'auto',
 12 |   'cursor': 'auto',
 13 |   'direction': 'ltr',
 14 |   'display': 'inline',
 15 |   'dominant-baseline': 'auto',
 16 |   'enable-background': '',
 17 |   'fill': 'rgb(0, 0, 0)',
 18 |   'fill-opacity': '1',
 19 |   'fill-rule': 'nonzero',
 20 |   'filter': 'none',
 21 |   'flood-color': 'rgb(0, 0, 0)',
 22 |   'flood-opacity': '1',
 23 |   'font': '',
 24 |   'font-family': 'normal',
 25 |   'font-size': 'medium',
 26 |   'font-size-adjust': 'auto',
 27 |   'font-stretch': 'normal',
 28 |   'font-style': 'normal',
 29 |   'font-variant': 'normal',
 30 |   'font-weight': '400',
 31 |   'glyph-orientation-horizontal': '0deg',
 32 |   'glyph-orientation-vertical': 'auto',
 33 |   'image-rendering': 'auto',
 34 |   'kerning': 'auto',
 35 |   'letter-spacing': '0',
 36 |   'lighting-color': 'rgb(255, 255, 255)',
 37 |   'marker': '',
 38 |   'marker-end': 'none',
 39 |   'marker-mid': 'none',
 40 |   'marker-start': 'none',
 41 |   'mask': 'none',
 42 |   'opacity': '1',
 43 |   'overflow': 'visible',
 44 |   'paint-order': 'fill',
 45 |   'pointer-events': 'auto',
 46 |   'shape-rendering': 'auto',
 47 |   'stop-color': 'rgb(0, 0, 0)',
 48 |   'stop-opacity': '1',
 49 |   'stroke': 'none',
 50 |   'stroke-dasharray': 'none',
 51 |   'stroke-dashoffset': '0',
 52 |   'stroke-linecap': 'butt',
 53 |   'stroke-linejoin': 'miter',
 54 |   'stroke-miterlimit': '4',
 55 |   'stroke-opacity': '1',
 56 |   'stroke-width': '1',
 57 |   'text-anchor': 'start',
 58 |   'text-decoration': 'none',
 59 |   'text-rendering': 'auto',
 60 |   'unicode-bidi': 'normal',
 61 |   'visibility': 'visible',
 62 |   'word-spacing': '0px',
 63 |   'writing-mode': 'lr-tb'
 64 | };
 65 | 
 66 | export const svgAttrs = [  // white list of attributes
 67 |   'id', 'xml: base', 'xml: lang', 'xml: space', // Core
 68 |   'height', 'result', 'width', 'x', 'y',     // Primitive
 69 |   'xlink: href',                              // Xlink attribute
 70 |   'href',
 71 |   'style', 'class',
 72 |   'd', 'pathLength',                          // Path
 73 |   'x', 'y', 'dx', 'dy', 'glyphRef', 'format',
 74 |   'x1', 'y1', 'x2', 'y2',
 75 |   'rotate', 'textLength',
 76 |   'cx', 'cy', 'r',
 77 |   'rx', 'ry',
 78 |   'fx', 'fy',
 79 |   'width', 'height',
 80 |   'refX', 'refY', 'orient',
 81 |   'markerUnits', 'markerWidth', 'markerHeight',
 82 |   'maskUnits',
 83 |   'transform',
 84 |   'viewBox', 'version',                      // Container
 85 |   'preserveAspectRatio', 'xmlns',
 86 |   'points',                                 // Polygons
 87 |   'offset',
 88 |   'xlink:href'
 89 | ];
 90 | 
 91 | // http://www.w3.org/TR/SVG/propidx.html
 92 | // via https://github.com/svg/svgo/blob/master/plugins/_collections.js
 93 | export const inheritableAttrs = [
 94 |   'clip-rule',
 95 |   'color',
 96 |   'color-interpolation',
 97 |   'color-interpolation-filters',
 98 |   'color-profile',
 99 |   'color-rendering',
100 |   'cursor',
101 |   'direction',
102 |   'fill',
103 |   'fill-opacity',
104 |   'fill-rule',
105 |   'font',
106 |   'font-family',
107 |   'font-size',
108 |   'font-size-adjust',
109 |   'font-stretch',
110 |   'font-style',
111 |   'font-variant',
112 |   'font-weight',
113 |   'glyph-orientation-horizontal',
114 |   'glyph-orientation-vertical',
115 |   'image-rendering',
116 |   'kerning',
117 |   'letter-spacing',
118 |   'marker',
119 |   'marker-end',
120 |   'marker-mid',
121 |   'marker-start',
122 |   'pointer-events',
123 |   'shape-rendering',
124 |   'stroke',
125 |   'stroke-dasharray',
126 |   'stroke-dashoffset',
127 |   'stroke-linecap',
128 |   'stroke-linejoin',
129 |   'stroke-miterlimit',
130 |   'stroke-opacity',
131 |   'stroke-width',
132 |   'text-anchor',
133 |   'text-rendering',
134 |   'transform',
135 |   'visibility',
136 |   'white-space',
137 |   'word-spacing',
138 |   'writing-mode'
139 | ];
140 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export {default} from './svgsaver';
2 | 


--------------------------------------------------------------------------------
/src/saveuri.js:
--------------------------------------------------------------------------------
 1 | /* global Image, MouseEvent */
 2 | 
 3 | /* Some simple utilities for saving SVGs, including an alternative to saveAs */
 4 | 
 5 | import {isDefined} from './utils';
 6 | import FileSaver from 'file-saver';
 7 | 
 8 | // detection
 9 | const DownloadAttributeSupport = (typeof document !== 'undefined') &&
10 |   ('download' in document.createElement('a')) &&
11 |   (typeof MouseEvent === 'function');
12 | 
13 | export function saveUri (uri, name) {
14 |   if (DownloadAttributeSupport) {
15 |     const dl = document.createElement('a');
16 |     dl.setAttribute('href', uri);
17 |     dl.setAttribute('download', name);
18 |     // firefox doesn't support `.click()`...
19 |     // from https://github.com/sindresorhus/multi-download/blob/gh-pages/index.js
20 |     dl.dispatchEvent(new MouseEvent('click'));
21 |     return true;
22 |   } else if (typeof window !== 'undefined') {
23 |     window.open(uri, '_blank', '');
24 |     return true;
25 |   }
26 | 
27 |   return false;
28 | }
29 | 
30 | export function createCanvas (uri, name, cb) {
31 |   const canvas = document.createElement('canvas');
32 |   const context = canvas.getContext('2d');
33 | 
34 |   const image = new Image();
35 |   image.onload = function () {
36 |     canvas.width = image.width;
37 |     canvas.height = image.height;
38 |     context.drawImage(image, 0, 0);
39 | 
40 |     cb(canvas);
41 |   };
42 |   image.src = uri;
43 |   return true;
44 | }
45 | 
46 | export function savePng (uri, name) {
47 |   return createCanvas(uri, name, function (canvas) {
48 |     if (isDefined(canvas.toBlob)) {
49 |       canvas.toBlob(function (blob) {
50 |         FileSaver.saveAs(blob, name);
51 |       });
52 |     } else {
53 |       saveUri(canvas.toDataURL('image/png'), name);
54 |     }
55 |   });
56 | }
57 | 


--------------------------------------------------------------------------------
/src/svgsaver.js:
--------------------------------------------------------------------------------
  1 | /* global Blob */
  2 | 
  3 | import {svgAttrs, svgStyles, inheritableAttrs} from './collection';
  4 | import {cloneSvg} from './clonesvg';
  5 | import {saveUri, savePng, createCanvas} from './saveuri';
  6 | import {isDefined, isFunction, isUndefined, isNode} from './utils';
  7 | import FileSaver from 'file-saver';
  8 | 
  9 | const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
 10 | 
 11 | // inheritable styles may be overridden by parent, always copy for now
 12 | inheritableAttrs.forEach(function (k) {
 13 |   if (k in svgStyles) {
 14 |     svgStyles[k] = true;
 15 |   }
 16 | });
 17 | 
 18 | export class SvgSaver {
 19 | 
 20 |   static getSvg (el) {
 21 |     if (isUndefined(el) || el === '') {
 22 |       el = document.body.querySelector('svg');
 23 |     } else if (typeof el === 'string') {
 24 |       el = document.body.querySelector(el);
 25 |     }
 26 |     if (el && el.tagName !== 'svg') {
 27 |       el = el.querySelector('svg');
 28 |     }
 29 |     if (!isNode(el)) {
 30 |       throw new Error('svgsaver: Can\'t find an svg element');
 31 |     }
 32 |     return el;
 33 |   }
 34 | 
 35 |   static getFilename (el, filename, ext) {
 36 |     if (!filename || filename === '') {
 37 |       filename = (el.getAttribute('title') || 'untitled') + '.' + ext;
 38 |     }
 39 |     return encodeURI(filename);
 40 |   }
 41 | 
 42 |   /**
 43 |   * SvgSaver constructor.
 44 |   * @constructs SvgSaver
 45 |   * @api public
 46 |   *
 47 |   * @example
 48 |   * var svgsaver = new SvgSaver();                      // creates a new instance
 49 |   * var svg = document.querySelector('#mysvg');         // find the SVG element
 50 |   * svgsaver.asSvg(svg);                                // save as SVG
 51 |   */
 52 |   constructor ({ attrs, styles } = {}) {
 53 |     this.attrs = (attrs === undefined) ? svgAttrs : attrs;
 54 |     this.styles = (styles === undefined) ? svgStyles : styles;
 55 |   }
 56 | 
 57 |   /**
 58 |   * Return the cloned SVG after cleaning
 59 |   *
 60 |   * @param {SVGElement} el The element to copy.
 61 |   * @returns {SVGElement} SVG text after cleaning
 62 |   * @api public
 63 |   */
 64 |   cloneSVG (el) {
 65 |     el = SvgSaver.getSvg(el);
 66 |     const svg = cloneSvg(el, this.attrs, this.styles);
 67 | 
 68 |     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
 69 |     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 70 |     svg.setAttribute('version', 1.1);
 71 | 
 72 |     // height and width needed to download in FireFox
 73 |     svg.setAttribute('width', svg.getAttribute('width') || '500');
 74 |     svg.setAttribute('height', svg.getAttribute('height') || '900');
 75 | 
 76 |     return svg;
 77 |   }
 78 | 
 79 |   /**
 80 |   * Return the SVG HTML text after cleaning
 81 |   *
 82 |   * @param {SVGElement} el The element to copy.
 83 |   * @returns {String} SVG text after cleaning
 84 |   * @api public
 85 |   */
 86 |   getHTML (el) {
 87 |     const svg = this.cloneSVG(el);
 88 | 
 89 |     var html = svg.outerHTML;
 90 |     if (html) {
 91 |       return html;
 92 |     }
 93 | 
 94 |     // see http://stackoverflow.com/questions/19610089/unwanted-namespaces-on-svg-markup-when-using-xmlserializer-in-javascript-with-ie
 95 |     svg.removeAttribute('xmlns');
 96 |     svg.removeAttribute('xmlns:xlink');
 97 | 
 98 |     svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
 99 |     svg.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
100 | 
101 |     return (new window.XMLSerializer()).serializeToString(svg);
102 |   }
103 | 
104 |   /**
105 |   * Return the SVG, after cleaning, as a text/xml Blob
106 |   *
107 |   * @param {SVGElement} el The element to copy.
108 |   * @returns {Blog} SVG as a text/xml Blob
109 |   * @api public
110 |   */
111 |   getBlob (el) {
112 |     const html = this.getHTML(el);
113 |     return new Blob([html], { type: 'text/xml' });
114 |   }
115 | 
116 |   /**
117 |   * Return the SVG, after cleaning, as a image/svg+xml;base64 URI encoded string
118 |   *
119 |   * @param {SVGElement} el The element to copy.
120 |   * @returns {String} SVG as image/svg+xml;base64 URI encoded string
121 |   * @api public
122 |   */
123 |   getUri (el) {
124 |     const html = encodeURIComponent(this.getHTML(el));
125 |     if (isDefined(window.btoa)) {
126 |       // see http://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
127 |       return 'data:image/svg+xml;base64,' + window.btoa(unescape(html));
128 |     }
129 |     return 'data:image/svg+xml,' + html;
130 |   }
131 | 
132 |   /**
133 |   * Saves the SVG as a SVG file using method compatible with the browser
134 |   *
135 |   * @param {SVGElement} el The element to copy.
136 |   * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.svg'
137 |   * @returns {SvgSaver} The SvgSaver instance
138 |   * @api public
139 |   */
140 |   asSvg (el, filename) {
141 |     el = SvgSaver.getSvg(el);
142 |     filename = SvgSaver.getFilename(el, filename, 'svg');
143 |     if (isFunction(Blob)) {
144 |       return FileSaver.saveAs(this.getBlob(el), filename);
145 |     }
146 |     return saveUri(this.getUri(el), filename);
147 |   }
148 | 
149 |   /**
150 |   * Gets the SVG as a PNG data URI.
151 |   *
152 |   * @param {SVGElement} el The element to copy.
153 |   * @param {Function} cb Call back called with the PNG data uri.
154 |   * @api public
155 |   */
156 |   getPngUri (el, cb) {
157 |     if (isIE11) {
158 |       console.error('svgsaver: getPngUri not supported on IE11');
159 |     }
160 |     el = SvgSaver.getSvg(el);
161 |     var filename = SvgSaver.getFilename(el, null, 'png');
162 |     return createCanvas(this.getUri(el), filename, function (canvas) {
163 |       cb(canvas.toDataURL('image/png'));
164 |     });
165 |   }
166 | 
167 |   /**
168 |   * Saves the SVG as a PNG file using method compatible with the browser
169 |   *
170 |   * @param {SVGElement} el The element to copy.
171 |   * @param {string} [filename] The filename to save, defaults to the SVG title or 'untitled.png'
172 |   * @returns {SvgSaver} The SvgSaver instance
173 |   * @api public
174 |   */
175 |   asPng (el, filename) {
176 |     if (isIE11) {
177 |       console.error('svgsaver: asPng not supported on IE11');
178 |     }
179 |     el = SvgSaver.getSvg(el);
180 |     filename = SvgSaver.getFilename(el, filename, 'png');
181 |     return savePng(this.getUri(el), filename);
182 |   }
183 | 
184 | }
185 | 
186 | export default SvgSaver;
187 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | /* Some simple utilities */
 2 | 
 3 | export const isFunction = (a) => typeof a === 'function';
 4 | export const isDefined = (a) => typeof a !== 'undefined';
 5 | export const isUndefined = (a) => typeof a === 'undefined';
 6 | export const isObject = (a) => (a !== null && typeof a === 'object');
 7 | 
 8 | export function clone (obj) {
 9 |   if (obj == null || typeof obj !== 'object') { return obj; }
10 |   var copy = obj.constructor();
11 |   for (var attr in obj) {
12 |     if (obj.hasOwnProperty(attr)) { copy[attr] = obj[attr]; }
13 |   }
14 |   return copy;
15 | }
16 | 
17 | // from https://github.com/npm-dom/is-dom/blob/master/index.js
18 | export function isNode (val) {
19 |   if (!isObject(val)) { return false; }
20 |   if (isDefined(window) && isObject(window.Node)) { return val instanceof window.Node; }
21 |   return typeof val.nodeType === 'number' && typeof val.nodeName === 'string';
22 | }
23 | 


--------------------------------------------------------------------------------
/test/svgsaver-spec.js:
--------------------------------------------------------------------------------
  1 | /* global Blob */
  2 | 
  3 | import test from 'tape';
  4 | import SvgSaver from '../src/';
  5 | 
  6 | var html = `
  7 |   <style>
  8 |     rect { stroke-opacity: 0.75; fill-opacity: 1; stroke-width: 1; fill: #0000ff; stroke:none; }
  9 |     g { fill-opacity: 0.75; stroke-width: 1;  }'
 10 |   </style>
 11 |   <svg id="svg-0">
 12 |     <g>
 13 |       <rect id="rect-0" ng-scope x="10" y="10" height="100" width="100" style="opacity: 0.5; stroke:#ff0000;"/>
 14 |     </g>
 15 |   </svg>`;
 16 | 
 17 | const pg = document.createElement('div');
 18 | document.body.appendChild(pg);
 19 | 
 20 | function toDom (html) {
 21 |   pg.innerHTML = html;
 22 |   return pg.querySelector('svg');
 23 | }
 24 | 
 25 | var originalSvg, svgHtml, newSvgDom;
 26 | 
 27 | function beforeEach (svgSaver) {
 28 |   svgSaver = svgSaver || new SvgSaver();
 29 |   originalSvg = toDom(html);
 30 |   svgHtml = svgSaver.getHTML(originalSvg);
 31 |   newSvgDom = toDom(svgHtml);
 32 | }
 33 | 
 34 | test('should convert SVG element', (t) => {
 35 |   t.plan(1);
 36 | 
 37 |   beforeEach();
 38 |   t.equal(svgHtml.slice(0, 4), '<svg');
 39 | });
 40 | 
 41 | test('should find first svg in element', (t) => {
 42 |   t.plan(1);
 43 | 
 44 |   beforeEach();
 45 | 
 46 |   svgHtml = new SvgSaver().getHTML(pg);
 47 |   t.equal(svgHtml.slice(0, 4), '<svg');
 48 | });
 49 | 
 50 | test('should find first svg in body', (t) => {
 51 |   t.plan(1);
 52 | 
 53 |   beforeEach();
 54 | 
 55 |   svgHtml = new SvgSaver().getHTML();
 56 |   t.equal(svgHtml.slice(0, 4), '<svg');
 57 | });
 58 | 
 59 | test('should find svg by querySelector', (t) => {
 60 |   t.plan(1);
 61 | 
 62 |   beforeEach();
 63 | 
 64 |   svgHtml = new SvgSaver().getHTML('#svg-0');
 65 |   t.equal(svgHtml.slice(0, 4), '<svg');
 66 | });
 67 | 
 68 | test('should throw if no svg found', (t) => {
 69 |   t.plan(1);
 70 | 
 71 |   beforeEach();
 72 | 
 73 |   t.throws(function () {
 74 |     new SvgSaver().getHTML('#svg-1');
 75 |   });
 76 | });
 77 | 
 78 | test('should convert SVG element with children', function (t) {
 79 |   t.plan(1);
 80 | 
 81 |   beforeEach();
 82 |   t.notEqual(svgHtml.indexOf('<rect'), -1);
 83 | });
 84 | 
 85 | test('should convert SVG element with styles', function (t) {
 86 |   t.plan(1);
 87 | 
 88 |   beforeEach();
 89 |   var rect = newSvgDom.querySelector('#rect-0');
 90 |   t.equal(rect.style.opacity, '0.5');
 91 | });
 92 | 
 93 | test('should convert SVG element with CSS defined styles', function (t) {
 94 |   t.plan(1);
 95 | 
 96 |   beforeEach();
 97 |   var rect = newSvgDom.querySelector('#rect-0');
 98 |   t.equal(rect.style['stroke-opacity'], '0.75');
 99 | });
100 | 
101 | test('should convert SVG element removing unneeded attrs', function (t) {
102 |   t.plan(1);
103 | 
104 |   beforeEach();
105 |   var rect = newSvgDom.querySelector('#rect-0');
106 |   t.equal(rect.attributes['ng-scope'], undefined);
107 | });
108 | 
109 | test('should copy inheritable styles even if default', function (t) {
110 |   t.plan(1);
111 | 
112 |   beforeEach();
113 |   var rect = newSvgDom.querySelector('#rect-0');
114 |   t.equal(rect.style['fill-opacity'], '1');
115 | });
116 | 
117 | test('should copy inheritable styles even if default, unless same as parent', function (t) {
118 |   t.plan(1);
119 | 
120 |   beforeEach();
121 |   var rect = newSvgDom.querySelector('#rect-0');
122 |   console.log(rect.style['stroke-width'], rect.parentNode.style['stroke-width']);
123 |   t.equal(rect.style['stroke-width'], '');
124 | });
125 | 
126 | test('should remove all attributes and styles when false', function (t) {
127 |   t.plan(5);
128 | 
129 |   var svgSaver = new SvgSaver({
130 |     styles: false,
131 |     attrs: false
132 |   });
133 | 
134 |   beforeEach(svgSaver);
135 |   var rect = newSvgDom.querySelector('rect');
136 | 
137 |   t.equal(rect.style['opacity'], '');
138 |   t.equal(rect.style['stroke-opacity'], '');
139 |   t.equal(rect.hasAttribute('ng-scope'), false);
140 |   t.equal(rect.hasAttribute('x'), false);
141 |   t.equal(rect.hasAttribute('y'), false);
142 | });
143 | 
144 | test('should remove all attributes and styles when empty', function (t) {
145 |   t.plan(5);
146 | 
147 |   var svgSaver = new SvgSaver({
148 |     styles: {},
149 |     attrs: []
150 |   });
151 | 
152 |   beforeEach(svgSaver);
153 |   var rect = newSvgDom.querySelector('rect');
154 | 
155 |   t.equal(rect.style['opacity'], '');
156 |   t.equal(rect.style['stroke-opacity'], '');
157 |   t.equal(rect.hasAttribute('ng-scope'), false);
158 |   t.equal(rect.hasAttribute('x'), false);
159 |   t.equal(rect.hasAttribute('y'), false);
160 | });
161 | 
162 | test('should retain inline styles and CSS styles in whitelist', function (t) {
163 |   t.plan(5);
164 | 
165 |   var svgSaver = new SvgSaver({
166 |     styles: {
167 |       'stroke-opacity': '1'
168 |     },
169 |     attrs: ['id', 'style']
170 |   });
171 | 
172 |   beforeEach(svgSaver);
173 |   var rect = newSvgDom.querySelector('rect');
174 | 
175 |   t.equal(rect.style['opacity'], '0.5');
176 |   t.equal(rect.style['stroke-opacity'], '0.75');
177 |   t.equal(rect.hasAttribute('ng-scope'), false);
178 |   t.equal(rect.hasAttribute('x'), false);
179 |   t.equal(rect.hasAttribute('y'), false);
180 | });
181 | 
182 | test('should retain inline styles and attributes in whitelist', function (t) {
183 |   t.plan(5);
184 | 
185 |   var svgSaver = new SvgSaver({
186 |     styles: {
187 |       'stroke-opacity': '1'
188 |     },
189 |     attrs: ['id', 'style', 'ng-scope', 'x']
190 |   });
191 | 
192 |   beforeEach(svgSaver);
193 |   var rect = newSvgDom.querySelector('rect');
194 | 
195 |   t.equal(rect.style['opacity'], '0.5');
196 |   t.equal(rect.style['stroke-opacity'], '0.75');
197 |   t.ok(rect.hasAttribute('ng-scope'));
198 |   t.equal(rect.getAttribute('x'), '10');
199 |   t.equal(rect.hasAttribute('y'), false);
200 | });
201 | 
202 | test('should copy all attributes and styles when true', function (t) {
203 |   t.plan(5);
204 | 
205 |   var svgSaver = new SvgSaver({
206 |     attrs: true,  // copy all attributes
207 |     styles: true  // copy all styles
208 |   });
209 | 
210 |   beforeEach(svgSaver);
211 |   var rect = newSvgDom.querySelector('rect');
212 | 
213 |   t.equal(rect.style['opacity'], '0.5');
214 |   t.equal(rect.style['stroke-opacity'], '0.75');
215 |   t.ok(rect.hasAttribute('ng-scope'));
216 |   t.equal(rect.getAttribute('x'), '10');
217 |   t.equal(rect.getAttribute('y'), '10');
218 | });
219 | 
220 | test('should convert SVG element to Blob', function (t) {
221 |   t.plan(1);
222 | 
223 |   var svgSaver = new SvgSaver();
224 |   toDom(html);
225 | 
226 |   if (typeof window.Blob !== 'function') {
227 |     window.Blob = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
228 |   }
229 | 
230 |   if (typeof window.Blob !== 'function') {
231 |     return t.ok(true);
232 |   }
233 | 
234 |   var e = document.querySelector('#svg-0');
235 |   var blob = svgSaver.getBlob(e);
236 |   t.ok(blob instanceof Blob);
237 | });
238 | 
239 | test('should convert SVG element to URI', function (t) {
240 |   t.plan(1);
241 | 
242 |   var svgSaver = new SvgSaver();
243 |   toDom(html);
244 | 
245 |   var e = document.querySelector('#svg-0');
246 |   var uri = svgSaver.getUri(e);
247 |   t.notEqual(uri.indexOf('data:image/svg+xml;base64'), -1);
248 | });
249 | 
250 | test('should save SVG', function (t) {
251 |   t.plan(1);
252 | 
253 |   var svgSaver = new SvgSaver();
254 |   toDom(html);
255 | 
256 |   /* if (typeof window.MouseEventConstructor !== 'function') {
257 |     return t.ok(true);
258 |   } */
259 | 
260 |   var e = document.querySelector('#svg-0');
261 |   t.doesNotThrow(function () {
262 |     svgSaver.asSvg(e);
263 |   });
264 | });
265 | 
266 | test('should save PNG', function (t) {
267 |   t.plan(1);
268 | 
269 |   var svgSaver = new SvgSaver();
270 |   toDom(html);
271 | 
272 |   var e = document.querySelector('#svg-0');
273 |   t.doesNotThrow(function () {
274 |     svgSaver.asPng(e);
275 |   });
276 | });
277 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
 1 | # Todo list
 2 | 
 3 | _\( managed using [todo-md](https://github.com/Hypercubed/todo-md) \)_
 4 | 
 5 | - [ ] Download multiple SVGs
 6 | - [ ] Make node compatible
 7 | - [x] Selectors
 8 | - [x] Make white lists optional
 9 |   - [ ] Document options
10 | - [ ] Include better whitelists.
11 |   - [x] Not all styles are inheritable
12 |   - [ ] Styles can be converted to attributes (all styles?)
13 |   - [ ] Different browsers return different style formats (rgb(0, 0, 0) vs \#000000)
14 |   - [ ] Normalize and minimize styles?
15 | - [x] Clean redundant inheritable styles
16 |   - [ ] Remove default top level inheritable styles
17 | - [x] image download (png, etc)
18 |   - [ ] Fix IE11 (https://github.com/gabelerner/canvg)
19 | - [ ] Promises
20 | - [ ] ForeignObjects
21 | 


--------------------------------------------------------------------------------