domenic / svg2png Goto Github PK

After running tests I'm seeing 3 failures:

  1) Scale 1.svg to 80%
  2) Scale 2.svg to 180%
  3) Omit scale argument for 3.svg
  ✓ should pass errors through

  1 passing (4s)
  3 failing

  1)  Scale 1.svg to 80%:
     Error: 2013-09-26 09:50:34.039 phantomjs[21124:707] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead.
      at /Users/morganwigmanich/src/localhost/sandbox/svg2png/lib/svg2png.js:22:16
      at ChildProcess.exithandler (child_process.js:635:7)
      at ChildProcess.EventEmitter.emit (events.js:98:17)
      at maybeClose (child_process.js:735:16)
      at Socket.<anonymous> (child_process.js:948:11)
      at Socket.EventEmitter.emit (events.js:95:17)
      at Pipe.close (net.js:466:12)

  2)  Scale 2.svg to 180%:
     Error: 2013-09-26 09:50:34.946 phantomjs[21126:707] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead.
      at /Users/morganwigmanich/src/localhost/sandbox/svg2png/lib/svg2png.js:22:16
      at ChildProcess.exithandler (child_process.js:635:7)
      at ChildProcess.EventEmitter.emit (events.js:98:17)
      at maybeClose (child_process.js:735:16)
      at Process.ChildProcess._handle.onexit (child_process.js:802:5)

  3)  Omit scale argument for 3.svg:
     Error: 2013-09-26 09:50:36.198 phantomjs[21130:707] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead.
      at /Users/morganwigmanich/src/localhost/sandbox/svg2png/lib/svg2png.js:22:16
      at ChildProcess.exithandler (child_process.js:635:7)
      at ChildProcess.EventEmitter.emit (events.js:98:17)
      at maybeClose (child_process.js:735:16)
      at Socket.<anonymous> (child_process.js:948:11)
      at Socket.EventEmitter.emit (events.js:95:17)
      at Pipe.close (net.js:466:12)

Appears to be related to this issue on PhantomJS ariya/phantomjs#11612

I can't seem to get image tags to work when they are local files. The SVG does display correctly when opened in a browser, but doesn't convert correctly. The linked image is missing from the output. See below for example:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">
<g>
<!--
This works:
    <image x="0" y="0" width="100%" height="100%" xlink:href="http://placekitten.com/100/100" />
This doesn't work: -->
    <image x="0" y="0" width="100%" height="100%" xlink:href="./kitten.png" />
</g>
</svg>

I'm not sure if this is expected behavior, but if I make the scale 2, the PNG is double the height and width, but everything else is the same size, positioned in the top left corner. Is there a way to make the entire document scale? Or is my SVG not set up properly? I can attach my files if they are needed.

3.1.1 requires node >=5, whereas 3.1.0 does not. 3.1.1 breaks every project that depends on yours because of the way semver works. I see that you published a 4.0.0, but you should also publish a 3.1.2 which reverts the breaking change.

I am getting this:

{ [Error: Command failed: ] killed: false, code: 2, signal: null }

On Ubuntu 12.04, the code runs fine on Heroku, Nodejitsu, etc. but on my own ubuntu server something weird is going on, any ideas?

Hello!

I'm using svg2png through gulp-svg2png, and I'm having an issue: akoenig/gulp-svg2png#22

Basically, after updating svg2png to 3, this happened:

I'm guessing that it's a svg2png issue as I can't see anything in the gulp-svg2png code that could be causing this.

Any ideas?

Hi,

Our development VM has 4GB of memory and 2CPU assigned at 75% execution cap. We are running the following gulp script to transform our svg to png. However 8 out of 10 times it completely kills the VM. The only solution is to just force a poweroff and reboot.

It is ran on a debian wheezy VM.

I really hope there is someone with a solution for this issue.

gulp.task('svg2png', ['clean-dest', 'build-iconfont'], function () {
      return gulp.src(iconsInput)
          .pipe(svg2png())
          .pipe(gulp.dest(iconOutput));
});

The input are 109 SVGs. Is there a way to make it work without freezing the whole OS?

The default options parameter is still in master/HEAD. The release notes for 4.0 indicates this was an accident.

The Promises/A+ logo converted ends up with a bit of a green border:

See #20 for background. For images like

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="-5 -5 10 10">
   <circle cx="0" cy="0" r="5"/>
</svg>

we should be inferring a width/height of 15 = 100% * (10 - (-5)). Currently the code assumes all widths are pixels, which is wrong.

I have a issue where is looks like external images haven't fully loaded before the png is created, so parts of the svg that should have a background image are white.

If I check the svg the image display as they should so somewhere in the process it's failing. This doesn't happen every time but at least 1 in 8 times it does.

Is there anything I can do that would fix this issue.

I tried to convert an SVG file with transform scale() and transform rotate(), but I can't get it to work. The conversion only outputs the images at their original coordinates but without any rotation or scale.

Original SVG

Converted jpg

These are the properties that are not being converted:
style="transform: scale(1.9939797114561713) rotate(15.47907791300374925deg); transform-origin: 73.56616973876953px 56.75px;"

const svg2png = require("svg2png");

Node :v5.7.1
svg2png: v4.0.0

In lib/svg2png.js, you use this line to reference the PhantomJS binary:

var phantomjsCmd = path.resolve(__dirname, "../node_modules/phantomjs/bin/phantomjs");

You hardcoded the PhantomJS binary to a local submodule of svg2png. In my case, however, PhantomJS is itself a package dependency, so it's not installed as a submodule of svg2png, but rather as a sibling of svg2png. Thus the above line fails in my context.

Shouldn't you rather replace the line with

var phantomjsCmd = require('phantomjs').path;

or something similar?

Please note: I'm completely new to Node.js, so I may be absolutely wrong with this ... Please correct me in that case!

Thanks, cheers,
Joschi

svg2png 4.1.1 and phantomjs 2.1.1

svg2png atari.svg

./node_modules/svg2png/lib/svg2png.js:65
        throw new Error(stdout.replace(/\r/g, "").trim());
        ^

Error: Width or height could not be determined from either the source file or the supplied dimensions

  phantomjs://code/converter.js:49 in onLoadFinished
    at processResult (./node_modules/svg2png/lib/svg2png.js:65:15)
    at Function.module.exports.sync (./node_modules/svg2png/lib/svg2png.js:25:12)
    at Object.<anonymous> (./node_modules/svg2png/bin/svg2png-cli.js:35:24)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)

and

svg2png atari.svg -w 240

./node_modules/svg2png/lib/svg2png.js:71
        throw new Error(stderr.replace(/\r/g, "").trim());
        ^

Error: PhantomJS has crashed. Please read the bug reporting guide at
<http://phantomjs.org/bug-reporting.html> and file a bug report.
    at processResult (./node_modules/svg2png/lib/svg2png.js:71:15)
    at Function.module.exports.sync (./node_modules/svg2png/lib/svg2png.js:25:12)
    at Object.<anonymous> (./node_modules/svg2png/bin/svg2png-cli.js:35:24)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)

I'm just testing my implementation on a new server and for some reason it's not rendering the images that are in the svg and I can't work out why. It works fine locally and the images are stored in cloudinary so should be accessible so not sure what I"m missing.

This is an example of an svg I'm trying to convert

https://s3.eu-central-1.amazonaws.com/boxxer/uploads/items/57c46a04f1dc422b002ff291.svg

but the result looks like

https://res.cloudinary.com/dot-to-dot-design/image/upload/f_auto,q_auto,w_600/boxxer_s3/uploads/items/57c46a04f1dc422b002ff291_1472543810612.png

My servers run flynn (bit like heroku)

Just can't think what would be causing it not to render correctly

The readme is missing basic information like:

What operating systems does this program run on?
How do you install the program?
How do you execute the program?
What is PhantomJS?

The docs say something about Node.js, but what is it?

I'm not going to spend any more time on this project today, but if I end up working on it again, here's some notes...

• Fails on Node 0.8 because the npm version is too old to understand ^ syntax.
• Actual image comparison seems to fail on Node 0.10. Not sure why. Maybe because I tried this on Windows and the output is different on Linux?
• As shown in the Node 0.10 build, errors seem to cause test process hangs. No idea why. I noticed this locally too, however. You can reproduce it by putting a wrong image as a *-expected.png file. Probably easy to fix.

The color keyword currentColor does not work. It should be just an alias for black. at least thats what browsers do.

PhantomJS is an old software. It still uses QtWebKit. Maybe consider switching over to electron to leverage Chromium?

Maybe it'll fix some existing PhantomJS-based issues.

Hello!
I'm writing a build script and want to avoid transient disk writes.
Because raw png isn't endpoint, I want optimize image using pngquant.

My svg2png version:3.0.0

svg location:https://www.digitalocean.com/assets/media/homepage/team-collaboration-898f387c.svg

1. converter.js
   setSVGDimensions(page, dimensions.width, dimensions.height);

        page.viewportSize = {
            width: dimensions.width,
            height: dimensions.height
        };
        page.clipRect = {
            top: options.top,
            left: options.left,
            width: dimensions.width- 2*options.left,
            height: dimensions.height-2*options.top
        };
   

2,the use of the funciton
const fs = require("pn/fs");
const svg2png = require("svg2png");
fs.readFile(svgName+".svg")
.then(input=>svg2png(input, {top:top,left:left, width: 2left+100, height: 2top+100 }))
.then(buffer => fs.writeFile(pngName+".png", buffer))
.catch(e => console.error(e));

'undefined' is not a function when I run.

When I tried to using test by run: node integration.js, I get an error that says it can't find out phantom.

please support me since I have been get stuck on this 1 day

Hi all,

I have got the following error stack during converting:

$ svg2png icons.svg
C:\Users\Administrator\AppData\Roaming\nvm\v6.3.0\node_modules\svg2png\lib\svg2png.js:52
throw new Error(stdout.replace(/\r/g, "").trim());
^

Error: Width or height could not be determined from either the source file or the supplied dimensions

phantomjs://code/converter.js:36
at processResult (C:\Users\Administrator\AppData\Roaming\nvm\v6.3.0\node_modules\svg2png\lib\svg2png.js:52:16)
at Function.module.exports.sync (C:\Users\Administrator\AppData\Roaming\nvm\v6.3.0\node_modules\svg2png\lib\svg2png.js:22:12)
at Object. (C:\Users\Administrator\AppData\Roaming\nvm\v6.3.0\node_modules\svg2png\bin\svg2png-cli.js:35:24)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.runMain (module.js:575:10)
at run (bootstrap_node.js:352:7)

Thanks

Baris

In #12 and #10 two people (hi @DUBERT, @jacksleight) independently reported canvases scaling, instead of the image. More troublingly, in #10 at least the SVG in question was produced straight from Adobe Illustrator.

I'm curious if browsers have figured out a better scaling algorithm that we should be using. E.g., if you load up an <img src="svgFromIssue10.svg" width="200" height="200">, will it scale the image, or the canvas? If it scales the image, then perhaps we should borrow their algorithm.

Doing this:

svg2png("tick.svg", "tick.png", 2.0, function (err) {
    // PNGs for everyone!
});

Gives me a PNG that has double the canvas size (width and height), but the artwork remains the same size, only taking up the top left quarter of the image:

Link to source SVG

I've love to drive this with a simple CLI binary that I can use from my non-Node.js workflow. Any chance of seeing something like that?

I encounter the issue as #11.
And I correct this issue manually adding the xml tag at the first of the hcExportRequest.svg like below:

hcExportRequest.svg = '' + hcExportRequest.svg;

Hi, I started by following the document. Then I think the first line about pn should really be like.
const pn = require("pn/fs");

It seems that external symbols are not supported.

This works in all non IE browsers, should work here:

Is it possible to add a color option that output pngs with different color than the one svg defines?

Hi,

Im trying to use this library but i'm not reading an svg file from the filesystem. I want to parse an svg string containing all the markup and then convert it to png and render it to the standard response with mime type png. How can I achieve this with this library?

I would start with the svg definition in a string variable like this:

var mySVG = "..."

svg2png(mySVG).then
...

or something like that

c266004#diff-e6cb7d06781cf12f8e2d82b6ebdf7061R28

This moves the requirement for Node 4 to Node 6

  return new Promise((resolve, reject) => {
    const fs = require("pn/fs"); // https://www.npmjs.com/package/pn
    const svg2png = require("svg2png");
    fs.writeFileSync('./chart.svg', chart);

    fs.readFile("./chart.svg")
      .then(svg2png)
      .then(buffer => {
        fs.writeFile("./chart.png", buffer);
      })
      .then(() => {
        resolve(streams);
      })
      .catch(reject);
  });

I never get to the buffer callback. The chart.svg has svg in it:

<svg width="300" height="300" class="shadow"><g transform="translate(150,150)"><path d="M8.572527594031473e-15,-140A140,140 0 1,1 -43.26237921249269,133.14791228132148L0,0Z" fill="#e75244" style="fill-opacity: 0.15; stroke: #e75244; stroke-width: 2px;"></path><path d="M-43.26237921249269,133.14791228132148A140,140 0 0,1 9.862739597592311e-14,-140L0,0Z" fill="#33bb9d" style="fill-opacity: 0.15; stroke: #33bb9d; stroke-width: 2px;"></path><text transform="translate(69.13818384165964,10.950412552816177)" text-anchor="middle" style="fill: #e75244; font-size: 18px;">Male (55%)</text><text transform="translate(-69.13818384165964,-10.950412552816214)" text-anchor="middle" style="fill: #33bb9d; font-size: 18px;">Female (45%)</text></g></svg>

I get an error when I look at the reject:

[Error: Unknown encoding: <svg width="300" height="300" class="shadow"><g transform="translate(150,150)"><path d="M8.572527594031473e-15,-140A140,140 0 1,1 -43.26237921249269,133.14791228132148L0,0Z" fill="#e75244" style="fill-opacity: 0.15; stroke: #e75244; stroke-width: 2px;"></path><path d="M-43.26237921249269,133.14791228132148A140,140 0 0,1 9.862739597592311e-14,-140L0,0Z" fill="#33bb9d" style="fill-opacity: 0.15; stroke: #33bb9d; stroke-width: 2px;"></path><text transform="translate(69.13818384165964,10.950412552816177)" text-anchor="middle" style="fill: #e75244; font-size: 18px;">Male (55%)</text><text transform="translate(-69.13818384165964,-10.950412552816214)" text-anchor="middle" style="fill: #33bb9d; font-size: 18px;">Female (45%)</text></g></svg>]

I'm guessing d3-node doesn't create the xml doc properly.

well fixing that still didn't solve my problem. I think you have a bug with the options you pass to phantom. It is expecting options to be defined.

I passed in an empty object: svg2png(string, {}) and it got through const cp = childProcess.execFile(phantomjsCmd, getPhantomJSArgs(options), { maxBuffer: Infinity }); line #13. But then it just hangs.

I tried using svgexport cli tool npm i -g svgexport and it uses phantomjs and works fine.

This entire function assumes options is defined:

function getPhantomJSArgs(options) {
    if (options.filename !== undefined && options.url !== undefined) {
        throw new Error("Cannot specify both filename and url options");
    }

    // Convert filename option to url option
    if (options.filename !== undefined) {
        options = Object.assign({ url: fileURL(options.filename) }, options);
        delete options.filename;
    }

    return [
        converterFileName,
        options === undefined ? "undefined" : JSON.stringify(options)
    ];
}

You need to do if (options && options.filename){} etc

Trying to PNG this SVG:

<svg xmlns="http://www.w3.org/2000/svg"><g><text x="50" y="50" font-size="15">åäö</text></g></svg>

...gets me this:

Hey,
is it possible to add an option for all *.svg files in directory? I am currently using it in a bash script in the for loop

for f in *.svg; do
fbname=$(basename "$f" .svg);
svg2png $f -o "../PNG/64x64px/"$fbname".png" -w 64;
done

but it takes some time to generate png files (I also make 3 different sizes 64px,128px,256px). I'm guessing that maybe if the loop was inside script itself it would run faster because all the const and require would happen only once and not x-file times.

Hello Domenic,

many thanks for your work.

It is possible to invoke the 'render' function without any alpha channel?

Background:

Further automatically image processing with 'pngcrush' and dropping the alpha channel produces ugly artefacts.

Best greetings, Uli

PS: Here an example.

Not sure if this is an issue with build settings or the svg2png itself, but when we build with node 0.12.0 it errors out... "Use of const in strict mode."

favicons-webpack-plugin\node_modules\favicons\node_modules\svg2png\lib\svg2png.js:2
const path = require("path");
^^^^^
SyntaxError: Use of const in strict mode.
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (c:\www\klick-klickcom-2016-dev\node_modules\favicons-webpack-plugin\node_modules\favicons\helpers-es5.js:18:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (c:\www\klick-klickcom-2016-dev\node_modules\favicons-webpack-plugin\node_modules\favicons\es5.js:11:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (c:\www\klick-klickcom-2016-dev\node_modules\favicons-webpack-plugin\lib\favicons.js:3:16)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

On windows 7 64 bit platform - when svg2png (...) called no response returned from this function. No errors reported on console.

Same code works in expected manner on Mac.

On both platforms node packages installed separately.

Please advise fix.

Thanks,
Amar

Not a bug in svg2png, possibly an issue with phantomjs or the svg's that I am generating, to help establish that I was wondering whether you may have come across bad scaling at low resolution?
You can see the thumbnail attached - it looks whitewashed and blurry. When I scale the svg down to that size in chrome it looks much better.

Hey guys,
Loving the package, really nifty and easy to use!

Just one hiccup -- is there any chance that PhantomJS doesn't handle custom fonts declared in a <style> attribute within the <defs> section of an SVG?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewPort="0 0 1000 1000">
    <circle cx="230" cy="230" r="230" fill="#E91E63" />
    <text x="230" y="235" alignment-baseline="central" text-anchor="middle" fill="#fff" font-size="275" font-weight="100" font-family="Roboto Thin">X</text>
    <defs>
        <style type="text/css">
        @font-face {
            font-family: "Roboto Thin";
            font-weight: 100;
            font-style: normal;
            src: url("data:application/font-woff;charset=utf-8;base64,d09................GMgABAAAAACes==");
        }
        </style>
    </defs>
</svg>

It seems to ignore the import, although Google Chrome renders the SVG with the font just fine.

Can anyone please shed some light on this behavior?

Re-tested with svg2png 2.0.0 using npm test.

> [email protected] test /home/kaspar/projects/svg2png
> mocha



  1) Scale 1.svg to 80%
  2) Scale 2.svg to 180%
  3) Omit scale argument for 3.svg
  4) No green border for 4.svg
  5) Scales 5.svg correctly despite viewBox + fixed width/height
  ✓ should pass through errors that occur while calculating dimensions
  ✓ should pass through errors about unloadable source files

  2 passing (5s)
  5 failing

Not sure how to get a more verbose output out of Mocha.

I’ve been updating grunt-phantom-rasterize to work with PhantomJS 2 as PhantomJS 1.9 no longer works on macOS Sierra.

grunt-phantom-rasterize turns an SVG file into n PNG files at different sizes. The previous version of grunt-phantom-rasterize used v1.1.0 of svg2png; my fork is now using v4.0.0. Oddly it now seems to run a great deal slower — to create the PNGs used by my project now seems to take 5-10x as long as before.

Unfortunately, as I can no longer run PhantomJS 1.9, nor therefore svg2png 1.1.0, I cannot collect any data to demonstrate or locate the slowdown, so I am posting this here in case you might be able to advise.

I gather that svg2png is using a PhantomJS instance for each call of svg2png(), so one question that occurred to me is: is there a way around this, to re-use PhantomJS instances across calls to svg2png, or to add an API to ‘batch up’ conversion tasks?

Any plan to support SVG textPath?

svg2png no longer works on node v5 because of the default function parameters
please remove those or update the readme

Hi there,
Loving the package! Nice work. I use it on my material-letter-icons package, and it's awesome!

Just one small hiccup -- when running svg2png on Windows, the following error is thrown:

On Linux / Mac OS X, the error is not thrown and the png file is generated successfully.

The code used to run svg2png:

    // Convert the SVG file into a PNG file using svg2png
    svg2png(outputSVGPath, outputPNGPath, {width: 512, height: 512}, function(err) {
        // Report error
        if (err) {
            return cb(err);
        }

        // Success!
        cb();
    });

The actual SVG being converted:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="532" height="532" viewBox="0 0 512 512">
    <circle cx="255" cy="255" r="230" fill="{c}" />
    <text x="255" y="246" alignment-baseline="central" text-anchor="middle" fill="#fff" font-size="275" font-weight="300" font-family="Roboto">A</text>
</svg>

The svg2png package version is ^2.1.0.

Any help would be greatly appreciated!

Mac:10.10.5
svg2png :v3.0.1
node:v5.7.1

windows no problem

I have svg's that have their width and height set as percentages. This doesn't currently work with svg2png. I hacked a quick workaround that I am using - circuithub@4ff1bc3

Do you have any preferences for how this should be handled? If so I could look into it and create a PR if you don't get around to it.

When using font-weight: 100 through font-weight: 900 it seems as though only regular and bold are being used, and all other weights are being rounded up or down.

Each of these uses 100 through 900, and the svg preview shows the different weights, but when svg2png creates a png, it loses them.