svg2png - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

lib/converter.js

@@ -9,9 +9,9 @@ "use strict";
 if (system.args.length !== 4) {
-    console.error("Usage: converter.js source dest scale");
+    console.error("Usage: converter.js source dest resize");
     phantom.exit();
 } else {
-    convert(system.args[1], system.args[2], Number(system.args[3]));
+    convert(system.args[1], system.args[2], system.args[3]);
 }
 
-function convert(source, dest, scale) {
+function convert(source, dest, resize) {
     var page = webpage.create();
@@ -27,9 +27,36 @@
         try {
-            var dimensions = getSvgDimensions(page);
-            page.viewportSize = {
-                width: Math.round(dimensions.width * scale),
-                height: Math.round(dimensions.height * scale)
-            };
-            if (dimensions.shouldScale) {
-                page.zoomFactor = scale;
+            if (resize[0] === "{") {
+                resize = JSON.parse(resize);
+                var width = resize.width;
+                var height = resize.height;
+                if (width === undefined || height === undefined) {
+                    var dims = getSvgDimensions(page);
+                    if (width === undefined && height === undefined) {
+                        width = dims.width;
+                        height = dims.height;
+                    } else if (width === undefined) {
+                        var widthScale = height / dims.height;
+                        width = dims.width * widthScale;
+                    } else if (height === undefined) {
+                        var heightScale = width / dims.width;
+                        height = dims.height * heightScale;
+                    }
+                }
+                width = Math.round(width);
+                height = Math.round(height);
+                page.viewportSize = {
+                    width: width,
+                    height: height
+                };
+                setSvgDimensions(page, width, height);
+            } else {
+                var scale = Number(resize);
+                var dimensions = getSvgDimensions(page);
+                page.viewportSize = {
+                    width: Math.round(dimensions.width * scale),
+                    height: Math.round(dimensions.height * scale)
+                };
+                if (dimensions.shouldScale) {
+                    page.zoomFactor = scale;
+                }
             }
@@ -51,2 +78,25 @@ } catch (e) {
 
+function setSvgDimensions(page, width, height) {
+    return page.evaluate(function (width, height) {
+        /* global document: true */
+        var el = document.documentElement;
+
+        var viewBoxWidth = el.viewBox.animVal.width;
+        var viewBoxHeight = el.viewBox.animVal.height;
+        var usesViewBox = viewBoxWidth && viewBoxHeight;
+
+        if (!usesViewBox) {
+            var bbox = el.getBBox();
+            var bX = Math.round(bbox.x);
+            var bY = Math.round(bbox.y);
+            var bWidth = Math.round(bbox.width);
+            var bHeight = Math.round(bbox.height);
+            el.setAttribute("viewBox", bX + " " + bY + " " + bWidth + " " + bHeight);
+        }
+
+        el.setAttribute("width", width + "px");
+        el.setAttribute("height", height + "px");
+    }, width, height);
+}
+
 function getSvgDimensions(page) {
@@ -60,3 +110,6 @@ return page.evaluate(function () {
         var width = parseFloat(el.getAttribute("width"));
+        var widthIsPercent = /%\s*$/.test(el.getAttribute("width") || ""); // Phantom doesn't have endsWith
         var height = parseFloat(el.getAttribute("height"));
+        var heightIsPercent = /%\s*$/.test(el.getAttribute("height") || "");
+
         var hasWidthOrHeight = width || height;
@@ -68,2 +121,9 @@ var viewBoxWidth = el.viewBox.animVal.width;
         if (usesViewBox) {
+            if (widthIsPercent) {
+                width = viewBoxWidth / 100 * width;
+            }
+            if (heightIsPercent) {
+                height = viewBoxHeight / 100 * height;
+            }
+
             if (width && !height) {
@@ -88,4 +148,5 @@ height = width * viewBoxHeight / viewBoxWidth;
 
-        return { width: width, height: height, shouldScale: hasWidthOrHeight || !usesViewBox };
+        var shouldScale = (hasWidthOrHeight && !widthIsPercent && !heightIsPercent) || !usesViewBox;
+        return { width: width, height: height, shouldScale: shouldScale };
     });
 }

lib/svg2png.js

@@ -9,9 +9,11 @@ "use strict";
 
-module.exports = function svgToPng(sourceFileName, destFileName, scale, cb) {
-    if (typeof scale === "function") {
-        cb = scale;
-        scale = 1.0;
+module.exports = function svgToPng(sourceFileName, destFileName, resize, cb) {
+    if (typeof resize === "function") {
+        cb = resize;
+        resize = 1.0;
+    } else if (typeof resize === "object") {
+        resize = JSON.stringify(resize);
     }
 
-    var args = [converterFileName, sourceFileName, destFileName, scale];
+    var args = [converterFileName, sourceFileName, destFileName, resize];
     execFile(phantomjsCmd, args, function (err, stdout, stderr) {
@@ -18,0 +20,0 @@ if (err) {

package.json

 {
   "name": "svg2png",
   "description": "A SVG to PNG converter, using PhantomJS",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": "Domenic Denicola <[e-mail]> (https://domenic.me)",
@@ -14,2 +14,3 @@ "license": "WTFPL",
     "test": "mocha",
+    "rebaseline": "node test/success-tests/rebaseline.js",
     "lint": "jshint lib && jshint test"
@@ -16,0 +17,0 @@ },

README.md

@@ -18,5 +18,22 @@ # SVG-to-PNG Converter Using PhantomJS
 ```
-
 The scale factor is relative to the SVG's `viewbox` or `width`/`height` attributes, for the record.
 
+Maybe you need an image with exact dimensions:
+
+```js
+svg2png("source.svg", "dest.png", { width: 200, height: 150 }, function (err) {
+    // 200x150 pixel sized PNGs for everyone!
+});
+```
+
+The image will be centered and zoomed to best-fit but not stretched. You can also provide just a single dimension and the other one will be inferred automatically:
+
+```js
+svg2png("source.svg", "dest.png", { width: 300 }, function (err) {
+    // 300 pixel-wide PNGs for everyone!
+});
+```
+
+## How the conversion is done
+
 svg2png is built on the latest in [PhantomJS][] technology to render your SVGs using a headless WebKit instance. I have
@@ -23,0 +40,0 @@ found this to produce much more accurate renderings than other solutions like GraphicsMagick or Inkscape. Plus, it's

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

8923

increased by54.81%

Lines of code

152

increased by60%

Number of lines in readme file

52

increased by48.57%

No dependency changes