svgsaver - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

browser.js

 (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
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _computedStyles = require('computed-styles');
-
-var _computedStyles2 = _interopRequireDefault(_computedStyles);
-
-// Copies computed styles from source to target
-/**
-* Copies computed styles from source to target
-* @param  {element} source A DOM element to copy styles from
-* @param  {element} target A DOM element to copy styles to
-* @param {(object|boolean)} [defaultStyles=true] collection of CSS property-value pairs, false: copy none, true: copy all
-* @api public
-*/
-function copyStyles(source, target) {
-  var defaultStyles = arguments.length <= 2 || arguments[2] === undefined ? true : arguments[2];
-
-  if (defaultStyles === false) {
-    return;
-  }
-
-  var srcStyles = (0, _computedStyles2["default"])(source);
-
-  if (defaultStyles === true) {
-    // copy all styles
-    for (var key in srcStyles) {
-      target.style[key] = srcStyles[key];
-    }
-    return;
-  }
-
-  for (var key in defaultStyles) {
-
-    var def = defaultStyles[key];
-    if (def === false) continue; // copy never
-
-    var src = srcStyles[key];
-    if (typeof src !== "string") continue; // invalid
-
-    if (defaultStyles[key] === true || src !== def) {
-      target.style[key] = src;
-    }
-  }
-}
-
-exports["default"] = copyStyles;
-module.exports = exports["default"];
-},{"computed-styles":2}],2:[function(require,module,exports){
 'use strict';
@@ -62,65 +8,6 @@
 
-var isDefined = function isDefined(a) {
-  return typeof a !== 'undefined';
-};
-
-// from https://github.com/npm-dom/is-dom/blob/master/index.js
-function isNode(val) {
-  if (!val || typeof val !== 'object') return false;
-  if (window && 'object' == typeof window.Node) return val instanceof window.Node;
-  return 'number' == typeof val.nodeType && 'string' == typeof val.nodeName;
-}
-
-// Convert computed styles to something we can iterate over
-// adapted from http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element/6416527#6416527
-function convertComputedStyles(computed) {
-  var styles = {};
-  for (var i = 0, l = computed.length; i < l; i++) {
-    var prop = computed[i];
-    styles[prop] = computed.getPropertyValue(prop);
-  }
-  return styles;
-}
-
-/**
-* Returns a collection of CSS property-value pairs
-* @param  {element} node A DOM element
-* @return {object} collection of CSS property-value pairs
-* @api public
-*/
-function computedStyles(node) {
-  if (!isNode(node)) {
-    throw new Error('parameter 1 is not of type \'Element\'');
-  }
-  // adapted from https://github.com/angular/angular.js/issues/2866#issuecomment-31012434
-  if (isDefined(node.currentStyle)) {
-    //for old IE
-    return node.currentStyle;
-  } else if (isDefined(window.getComputedStyle)) {
-    //for modern browsers
-    return convertComputedStyles(node.ownerDocument.defaultView.getComputedStyle(node, null));
-  }
-  return node.style;
-}
-
-exports['default'] = computedStyles;
-module.exports = exports['default'];
-
-},{}],3:[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 _copyStyles = require('copy-styles');
-
-var _copyStyles2 = _interopRequireDefault(_copyStyles);
-
 var svgStyles = { // Whitelist of CSS styles and default values
@@ -257,2 +144,55 @@ 'alignment-baseline': 'auto',
 
+var _isDefined = function _isDefined(a) {
+  return typeof a !== 'undefined';
+};
+var isObject = function isObject(a) {
+  return a !== null && typeof a === 'object';
+};
+
+// from https://github.com/npm-dom/is-dom/blob/master/index.js
+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);
+
+/**
+* Returns a collection of CSS property-value pairs
+* @param  {Element} node A DOM element to copy styles from
+* @param  {Object} [target] An optional object to copy styles to
+* @param {(Object|Boolean)} [default=true] A collection of CSS property-value pairs, false: copy none, true: copy all
+* @return {object} collection of CSS property-value pairs
+* @api public
+*/
+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 value = useComputedStyles ? computed.getPropertyValue(key) : computed[key];
+    if (styleList === true || styleList[key] === true || value !== styleList[key]) {
+      target[key] = value;
+    }
+  }
+
+  return target;
+}
+
 // Removes attributes that are not valid for SVGs
@@ -281,7 +221,7 @@ function cleanAttrs(el, attrs, styles) {
 
-  (0, _copyStyles2['default'])(src, clonedSvg, styles);
+  computedStyles(src, clonedSvg.style, styles);
   cleanAttrs(clonedSvg, attrs, styles);
 
   Array.prototype.slice.call(clonedSvg.querySelectorAll('*')).forEach(function (target, index) {
-    (0, _copyStyles2['default'])(srcChildren[index], target, styles);
+    computedStyles(srcChildren[index], target.style, styles);
     cleanAttrs(target, attrs, styles);
@@ -426,3 +366,3 @@ });
 
-},{"copy-styles":1}]},{},[3])(3)
+},{}]},{},[1])(1)
 });

browser.min.js

@@ -1,1 +0,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});function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}var _computedStyles=require("computed-styles");var _computedStyles2=_interopRequireDefault(_computedStyles);function copyStyles(source,target){var defaultStyles=arguments.length<=2||arguments[2]===undefined?true:arguments[2];if(defaultStyles===false){return}var srcStyles=(0,_computedStyles2["default"])(source);if(defaultStyles===true){for(var key in srcStyles){target.style[key]=srcStyles[key]}return}for(var key in defaultStyles){var def=defaultStyles[key];if(def===false)continue;var src=srcStyles[key];if(typeof src!=="string")continue;if(defaultStyles[key]===true||src!==def){target.style[key]=src}}}exports["default"]=copyStyles;module.exports=exports["default"]},{"computed-styles":2}],2:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});var isDefined=function isDefined(a){return typeof a!=="undefined"};function isNode(val){if(!val||typeof val!=="object")return false;if(window&&"object"==typeof window.Node)return val instanceof window.Node;return"number"==typeof val.nodeType&&"string"==typeof val.nodeName}function convertComputedStyles(computed){var styles={};for(var i=0,l=computed.length;i<l;i++){var prop=computed[i];styles[prop]=computed.getPropertyValue(prop)}return styles}function computedStyles(node){if(!isNode(node)){throw new Error("parameter 1 is not of type 'Element'")}if(isDefined(node.currentStyle)){return node.currentStyle}else if(isDefined(window.getComputedStyle)){return convertComputedStyles(node.ownerDocument.defaultView.getComputedStyle(node,null))}return node.style}exports["default"]=computedStyles;module.exports=exports["default"]},{}],3:[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 _copyStyles=require("copy-styles");var _copyStyles2=_interopRequireDefault(_copyStyles);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":"normal","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","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"];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 DownloadAttributeSupport=typeof document!=="undefined"&&"download"in document.createElement("a");function saveUri(uri,name){if(DownloadAttributeSupport){var dl=document.createElement("a");dl.setAttribute("href",uri);dl.setAttribute("download",name);dl.click();return true}else if(typeof window!=="undefined"){window.open(uri,"_blank","");return true}return false}function savePng(uri,name){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);if(isDefined(window.saveAs)&&isDefined(canvas.toBlob)){canvas.toBlob(function(blob){saveAs(blob,name)})}else{saveUri(canvas.toDataURL("image/png"),name)}};image.src=uri;return true}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 cloneSvg(src,attrs,styles){var clonedSvg=src.cloneNode(true);var srcChildren=src.querySelectorAll("*");(0,_copyStyles2["default"])(src,clonedSvg,styles);cleanAttrs(clonedSvg,attrs,styles);Array.prototype.slice.call(clonedSvg.querySelectorAll("*")).forEach(function(target,index){(0,_copyStyles2["default"])(srcChildren[index],target,styles);cleanAttrs(target,attrs,styles)});return clonedSvg}inheritableAttrs.forEach(function(k){if(k in svgStyles){svgStyles[k]=true}});var SvgSaver=function(){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:"getHTML",value:function getHTML(el){var svg=cloneSvg(el,this.attrs,this.styles);svg.setAttribute("xmlns","http://www.w3.org/2000/svg");svg.setAttribute("version",1.1);svg.setAttribute("width",svg.getAttribute("width")||"500");svg.setAttribute("height",svg.getAttribute("height")||"900");return svg.outerHTML||(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=this.getHTML(el);if(isDefined(window.btoa)){return"data:image/svg+xml;base64,"+window.btoa(html)}return"data:image/svg+xml,"+encodeURIComponent(html)}},{key:"asSvg",value:function asSvg(el,filename){if(!filename||filename===""){filename=el.getAttribute("title");filename=(filename||"untitled")+".svg"}if(isDefined(window.saveAs)&&isFunction(Blob)){return saveAs(this.getBlob(el),filename)}else{return saveUri(this.getUri(el),filename)}}},{key:"asPng",value:function asPng(el,filename){if(!filename||filename===""){filename=el.getAttribute("title");filename=(filename||"untitled")+".png"}return savePng(this.getUri(el),filename)}}]);return SvgSaver}();exports["default"]=SvgSaver;module.exports=exports["default"]},{"copy-styles":1}]},{},[3])(3)});
+(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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}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":"normal","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","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"];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 DownloadAttributeSupport=typeof document!=="undefined"&&"download"in document.createElement("a");function saveUri(uri,name){if(DownloadAttributeSupport){var dl=document.createElement("a");dl.setAttribute("href",uri);dl.setAttribute("download",name);dl.click();return true}else if(typeof window!=="undefined"){window.open(uri,"_blank","");return true}return false}function savePng(uri,name){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);if(isDefined(window.saveAs)&&isDefined(canvas.toBlob)){canvas.toBlob(function(blob){saveAs(blob,name)})}else{saveUri(canvas.toDataURL("image/png"),name)}};image.src=uri;return 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 value=useComputedStyles?computed.getPropertyValue(key):computed[key];if(styleList===true||styleList[key]===true||value!==styleList[key]){target[key]=value}}return target}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 cloneSvg(src,attrs,styles){var clonedSvg=src.cloneNode(true);var srcChildren=src.querySelectorAll("*");computedStyles(src,clonedSvg.style,styles);cleanAttrs(clonedSvg,attrs,styles);Array.prototype.slice.call(clonedSvg.querySelectorAll("*")).forEach(function(target,index){computedStyles(srcChildren[index],target.style,styles);cleanAttrs(target,attrs,styles)});return clonedSvg}inheritableAttrs.forEach(function(k){if(k in svgStyles){svgStyles[k]=true}});var SvgSaver=function(){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:"getHTML",value:function getHTML(el){var svg=cloneSvg(el,this.attrs,this.styles);svg.setAttribute("xmlns","http://www.w3.org/2000/svg");svg.setAttribute("version",1.1);svg.setAttribute("width",svg.getAttribute("width")||"500");svg.setAttribute("height",svg.getAttribute("height")||"900");return svg.outerHTML||(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=this.getHTML(el);if(isDefined(window.btoa)){return"data:image/svg+xml;base64,"+window.btoa(html)}return"data:image/svg+xml,"+encodeURIComponent(html)}},{key:"asSvg",value:function asSvg(el,filename){if(!filename||filename===""){filename=el.getAttribute("title");filename=(filename||"untitled")+".svg"}if(isDefined(window.saveAs)&&isFunction(Blob)){return saveAs(this.getBlob(el),filename)}else{return saveUri(this.getUri(el),filename)}}},{key:"asPng",value:function asPng(el,filename){if(!filename||filename===""){filename=el.getAttribute("title");filename=(filename||"untitled")+".png"}return savePng(this.getUri(el),filename)}}]);return SvgSaver}();exports["default"]=SvgSaver;module.exports=exports["default"]},{}]},{},[1])(1)});

CHANGELOG.md

@@ -9,2 +9,5 @@ CHANGELOG
 
+## 0.3.2 (2015-10-27)
+* Internal change to use latest computed-styles
+
 ## 0.3.1 (2015-10-23)
@@ -11,0 +14,0 @@ * Default is now to copy all inherited styles, regardless of value

lib/svgsaver.js

@@ -9,10 +9,4 @@ 'use strict';
 
-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 _copyStyles = require('copy-styles');
-
-var _copyStyles2 = _interopRequireDefault(_copyStyles);
-
 var svgStyles = { // Whitelist of CSS styles and default values
@@ -149,2 +143,55 @@ 'alignment-baseline': 'auto',
 
+var _isDefined = function _isDefined(a) {
+  return typeof a !== 'undefined';
+};
+var isObject = function isObject(a) {
+  return a !== null && typeof a === 'object';
+};
+
+// from https://github.com/npm-dom/is-dom/blob/master/index.js
+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);
+
+/**
+* Returns a collection of CSS property-value pairs
+* @param  {Element} node A DOM element to copy styles from
+* @param  {Object} [target] An optional object to copy styles to
+* @param {(Object|Boolean)} [default=true] A collection of CSS property-value pairs, false: copy none, true: copy all
+* @return {object} collection of CSS property-value pairs
+* @api public
+*/
+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 value = useComputedStyles ? computed.getPropertyValue(key) : computed[key];
+    if (styleList === true || styleList[key] === true || value !== styleList[key]) {
+      target[key] = value;
+    }
+  }
+
+  return target;
+}
+
 // Removes attributes that are not valid for SVGs
@@ -173,7 +220,7 @@ function cleanAttrs(el, attrs, styles) {
 
-  (0, _copyStyles2['default'])(src, clonedSvg, styles);
+  computedStyles(src, clonedSvg.style, styles);
   cleanAttrs(clonedSvg, attrs, styles);
 
   Array.prototype.slice.call(clonedSvg.querySelectorAll('*')).forEach(function (target, index) {
-    (0, _copyStyles2['default'])(srcChildren[index], target, styles);
+    computedStyles(srcChildren[index], target.style, styles);
     cleanAttrs(target, attrs, styles);
@@ -180,0 +227,0 @@ });

package.json

 {
   "name": "svgsaver",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "download an SVG element with css styles",
@@ -13,3 +13,3 @@ "main": "lib/svgsaver.js",
     "build": "npm run compile && npm run jsdoc2md",
-    "lint": "eslint src/*.js",
+    "lint": "eslint src/ test/",
     "watch": "watch \"npm run build\" src/",
@@ -50,3 +50,3 @@ "demo": "live-server --open=demo --ignore=src",
   "dependencies": {
-    "copy-styles": "^1.1.0"
+    "computed-styles": "^1.1.0"
   },
@@ -53,0 +53,0 @@ "directories": {

README.md

@@ -1,11 +0,35 @@
-svgsaver
-===
+# svgsaver
 
-download an SVG element as an SVG or PNG file, including CSS defined styles.
+Download an SVG element as an SVG or PNG file, including CSS defined styles.
 
+[![NPM version][npm-image]][npm-url]
+[![Downloads][download-badge]][npm-url]
+
 ## Features
-- Download `<svg>` by element object or CSS selectors.
-- Copies SVG element styles as rendered in the browser, including styles defined in CSS stylesheets.
+- Download `<svg>` by element object.
+- Download as SVG or PNG file.
+- Copies SVG element styles as rendered in the browser, including styles defined in CSS style sheets.
 - Copies only SVG relevant and non-default styles.  [See here](http://www.w3.org/TR/SVG/propidx.html).
+- Computed styles are in-lined for maximum compatibility.
 
+## Install
+
+### Node
+
+```js
+npm install svgsaver
+```
+
+### Bower
+
+```js
+bower install svgsaver
+```
+
+### JSPM
+
+```js
+jspm install svgsaver=npm:svgsaver
+```
+
 ## Usage
@@ -36,1 +60,6 @@
 [MIT License](http://en.wikipedia.org/wiki/MIT_License)
+
+[npm-url]: https://npmjs.org/package/svgsaver
+[npm-image]: https://img.shields.io/npm/v/svgsaver.svg?style=flat-square
+
+[download-badge]: http://img.shields.io/npm/dm/svgsaver.svg?style=flat-squar

src/clonesvg.js

 /* Some utilities for cloning SVGs with inline styles */
-import copyStyles from 'copy-styles';
+import computedStyles from 'computed-styles';
 import {isUndefined} from './utils';
@@ -26,3 +26,3 @@
 
-  copyStyles(src, clonedSvg, styles);
+  computedStyles(src, clonedSvg.style, styles);
   cleanAttrs(clonedSvg, attrs, styles);
@@ -32,3 +32,3 @@
     .forEach(function( target, index ) {
-      copyStyles(srcChildren[index], target, styles);
+      computedStyles(srcChildren[index], target.style, styles);
       cleanAttrs(target, attrs, styles);
@@ -35,0 +35,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48948

increased by0.31%

Number of lines in readme file

65

increased by80.56%

Worsened metrics

Lines of code

946

decreased by-0.53%

Dependency changes

• + Addedcomputed-styles@^1.1.0

• - Removedcopy-styles@^1.1.0

• - Removedcopy-styles@1.1.1(transitive)