Adds option for SVG fill attribute

README.md

@@ -60,6 +60,17 @@ Previous versions of svg2png attempted to infer a good size based on the `width`
 
 One thing to note is that svg2png does not and cannot stretch your images to new aspect ratios.
 
+
+## Set the SVG Fill Value
+You can also change the svg's output color on teh fly by passing a `fill` value as one of the options.
+
+```js
+svg2png(sourceBuffer, { width: 300, height: 400, fill: '#ff0000' })
+    .then(buffer => ...)
+    .catch(e => console.error(e));
+```
+Typically this is a hex value for the svg's desired fill color.
+
 ## CLI
 
 This package comes with a CLI version as well; you can install it globally with `npm install svg2png -g`. Use it as follows:
@@ -74,6 +85,7 @@ Options:
   -o, --output  The output filename; if not provided, will be inferred  [string]
   -w, --width   The output file width, in pixels                        [string]
   -h, --height  The output file height, in pixels                       [string]
+  -f, --fill    The value for the svg "fill" attribute                  [string]
   --help        Show help                                              [boolean]
   --version     Show version number                                    [boolean]
 ```

bin/svg2png-cli.js

@@ -24,6 +24,11 @@ const argv = yargs
         type: "string",
         describe: "The output file height, in pixels"
     })
+    .option("f", {
+        alias: "fill",
+        type: "string",
+        describe: "The value for the svg \"fill\" attribute"
+    })
     .demand(1)
     .help(false)
     .version()
@@ -32,7 +37,7 @@ const argv = yargs
 // TODO if anyone asks for it: support stdin/stdout when run that way
 
 const input = fs.readFileSync(argv._[0]);
-const output = svg2png.sync(input, { width: argv.width, height: argv.height, filename: argv._[0] });
+const output = svg2png.sync(input, { width: argv.width, height: argv.height, fill: argv.fill, filename: argv._[0] });
 
 const outputFilename = argv.output || path.basename(argv._[0], ".svg") + ".png";
 fs.writeFileSync(outputFilename, output, { flag: "wx" });

lib/converter.js

@@ -41,7 +41,7 @@ function convert(options) {
 
         try {
             if (options.width !== undefined || options.height !== undefined) {
-                setSVGDimensions(page, options.width, options.height);
+                setSVGAttrs(page, options.width, options.height);
             }
 
             var dimensions = getSVGDimensions(page);
@@ -52,7 +52,7 @@ function convert(options) {
                 return;
             }
 
-            setSVGDimensions(page, dimensions.width, dimensions.height);
+            setSVGAttrs(page, dimensions.width, dimensions.height, options.fill);
 
             page.viewportSize = {
                 width: dimensions.width,
@@ -81,12 +81,13 @@ function convert(options) {
     page.setContent(HTML_PREFIX + source, options.url || "http://example.com/");
 }
 
-function setSVGDimensions(page, width, height) {
+function setSVGAttrs(page, width, height, fill) {
+    // console.log('filling ');
     if (width === undefined && height === undefined) {
         return;
     }
 
-    page.evaluate(function (widthInside, heightInside) {
+    page.evaluate(function (widthInside, heightInside, fillInside) {
         /* global document: false */
         var el = document.querySelector("svg");
 
@@ -101,7 +102,12 @@ function setSVGDimensions(page, width, height) {
         } else {
             el.removeAttribute("height");
         }
-    }, width, height);
+
+        if (fillInside !== undefined) {
+            el.setAttribute("fill", fillInside);
+        }
+
+    }, width, height, fill);
 }
 
 function getSVGDimensions(page) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "svg2png",
   "description": "Converts SVGs to PNGs, using PhantomJS",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "author": "Domenic Denicola <[email protected]> (https://domenic.me)",
   "license": "WTFPL",
   "repository": "domenic/svg2png",