mapbox / spritezero Goto Github PK

small opinionated sprites

License: Other

JavaScript 100.00%

spritezero's Introduction

spritezero

Small opinionated sprites.

Why is this different than sprite generation libraries like spritesmith? spritezero was initially created to power a sprite API, and thus is geared towards performance, as well as an ability to work with image data in buffers rather than on disk. Also, since version 2.0, spritezero generates sprites based on SVG graphics alone, therefore making it possible to support @2x and higher-dpi sprites from the same source.

Usage

var spritezero = require('@mapbox/spritezero');
var fs = require('fs');
var glob = require('glob');
var path = require('path');

[1, 2, 4].forEach(function(pxRatio) {
    var svgs = glob.sync(path.resolve(path.join(__dirname, 'input/*.svg')))
        .map(function(f) {
            return {
                svg: fs.readFileSync(f),
                id: path.basename(f).replace('.svg', '')
            };
        });
    var pngPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.png'));
    var jsonPath = path.resolve(path.join(__dirname, 'output/sprite@' + pxRatio + '.json'));

    // Pass `true` in the layout parameter to generate a data layout
    // suitable for exporting to a JSON sprite manifest file.
    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: true }, function(err, dataLayout) {
        if (err) return;
        fs.writeFileSync(jsonPath, JSON.stringify(dataLayout));
    });

    // Pass `false` in the layout parameter to generate an image layout
    // suitable for exporting to a PNG sprite image file.
    spritezero.generateLayout({ imgs: svgs, pixelRatio: pxRatio, format: false }, function(err, imageLayout) {
        spritezero.generateImage(imageLayout, function(err, image) {
            if (err) return;
            fs.writeFileSync(pngPath, image);
        });
    });

});

Documentation

Complete API documentation is here: http://mapbox.github.io/spritezero/

Installation

Requires nodejs v10.0.0 or greater.

$ npm install @mapbox/spritezero

Executable

spritezero-cli is an executable for bundling and creating your own sprites from a folder of svg's:

$ npm install -g @mapbox/spritezero-cli
$ spritezero --help

Usage:
spritezero [output filename] [input directory]
  --retina      shorthand for --ratio=2
  --ratio=[n]   pixel ratio

spritezero's People

Contributors

Stargazers

Watchers

spritezero's Issues

Rendering artifacts

I'm getting some dark antialiasing artifacts in generated sprites. Here is a sample output:

When used in a style:

Update svg analysis to support placeholder text id's

We are implementing a new id called mapbox-text-placeholder to support highway shield work.

This id supports identical functionality to what mapbox-content does, which is cause us to return a bounding box for the path that has this id. Implementing this id separately from 9-part stretchable icon metadata allows us to re-use some existing code paths while supporting a semantically accurate/distinct id that is separate from stretchable icons.

Add Codeowners file

@mapbox/map-design-api - this repo should have a codeowner file listing @mapbox/map-design-api correct? (so that y'all are reviewers on any PRs)

/cc @mapbox/static-apis @mapbox/gl

Return empty PNG and empty JSON if images array is empty

Currently, passing an empty array into spritezero.generateImage throws an error (ref #10). The better behavior would be to return an empty PNG, possibly with an error that indicated that the image layout did not have any SVG's.

Add benchmarking scripts

For many types of changes (such as #76 and #78, recently) it would be great to have a set of benchmarking scripts for assessing performance impacts.

spritezero does currently have some unit-tests that function sort of like benchmarking (see here) but it is not ideal to have these mixed in with unit tests.

Benchmarking scripts guidelines:

Should live in the bench/ directory, following convention of other repos (ex https://github.com/mourner/rbush/tree/master/bench).
Can be run locally to assess if changes to spritezero deps or code have an impact on performance or memory usage
Should do no network, only local i/o
Should be primarily designed to be run locally and used for collaborative testing
Should nevertheless be run on CI (with explicit lines added to the .travis.yml to run them) to ensure they don't break (since they should not run as unit tests). But we should ignore their timing result on CI - the only purpose is to make sure they don't break under refactors.
Should dump their output in an easy to share format that can be posted on tickets and referred back to
Data input should be stable over time so their results can be compared across time with git bisect
Should have configurable concurrency and should not default to using os.cpus() otherwise results will not be very comparable across machines.

(h/t @springmeyer for this list)

Does not recognize stroke-dasharray

Stroke-dasharray is ignored. Renders as solid line. Tried with both and .

Spritezero does not handle SVG RGB color

Hello,

I'm trying to generate a sprite from basic SVG icons.

Some of my SVG icons has "rgb style" colors like:

rgb(71.764708%,6.27451%,10.196079%)

instead of basic hex codes.

The final sprite shows the icon but in gray. The color has been lost.

Any idea? Bug?

Thanks.

spritezero-cli is producing blurry images for some svgs, maybe anti-aliased

spritezero-cli version 2.0.0
spritezero version 4.0.1

Source svg: https://gist.github.com/JesseCrocker/c813239c149b7849d5efd733cf88eb3f

Comparison between output from spritezero and convert(Imagemagick)

spritezero output:

imagemagick output:

Install failed on windows 10 + nodejs 10

Hi all,
I have known that spritezero dropped support for Windows from version 6.0.0.
Now, I really want to use spritezero in my project. So, I can't install spritezero with any version?
Could you please help me check it? I think spritezero dropped support for Windows from version 6.0.0 only and I can use older version, such as: 5.1.0 or 5.0.0

CLI

There should be a cli for stitching together a directory of SVG's into a sprite.

Install fails on Node 7

It looks like clean installs do not work on Node 7. There is no prebuilt mapnik binary, and the compile-from-source step fails for some reason..

node-pre-gyp ERR! Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/mapnik/v3.5.14/Release/node-v51-darwin-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v51 ABI) (falling back to source compile with node-gyp) 
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
/bin/sh: mapnik-config: command not found
gyp: Call to 'mapnik-config --cflags' returned exit status 127 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/bryan/.nvm/versions/node/v7.2.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:305:16)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:191:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Darwin 16.1.0
gyp ERR! command "/Users/bryan/.nvm/versions/node/v7.2.0/bin/node" "/Users/bryan/.nvm/versions/node/v7.2.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/bryan/Projects/spritezero/node_modules/mapnik/lib/binding/node-v51-darwin-x64/mapnik.node" "--module_name=mapnik" "--module_path=/Users/bryan/Projects/spritezero/node_modules/mapnik/lib/binding/node-v51-darwin-x64"
gyp ERR! cwd /Users/bryan/Projects/spritezero/node_modules/mapnik
gyp ERR! node -v v7.2.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok

Support generate SDF icons

Mapbox-gl-js has support SDF icons for a long time, whereas there were no tools for generate SDF icons. SDF icons are useful because they are scaleable, colorable. Could you considering implement this feature as:

options.imgs = { svg: Buffer, id: String, sdf: Boolean }

Include pixelRatio when generating layout for Mapbox GL

Switch to SVG input

This is almost ready 2 go with mapnik/node-mapnik#469

svgo should be more than just dev-dependency?

#68 introduced svgo into the library, however this was only made a dev-dependency. This causes issues when spritezero is a dependency of another library as it won't install svgo and will then crash when it can't find it.

It looks like either svgo will need to be a strict dependency or the methods that svgo requires pulled out of index.js?

@kkaefer

Add eslint

eslint catches trivial bugs, so we should add it.

change arguments in generateLayout to options

We'd like the ability to pass max_size to spritezero (and ultimately to mapnik) and think that using options arguments is the right choice. This would be a breaking change.

This is related to this PR regarding errors we got when the pixel limit for sprites in mapnik was changed. This would allow max_size to be editable, and also allow us to test our fix for sprites that got uploaded before the limit was updated that are now throwing errors (we are going to drop the oversized icons from the spritesheet and then send it back).

I'll get started on a PR for this.

FYI @bsudekum @bhousel

icons jumping around

/cc @edenh

npm has published 6.3.0 however there is no tag here for that release

Migrate to svgo 2.x

svgo 1.x is deprecated. svgo 2.0 was released over a year ago. svgo contains a transitive dependency to high-risk vulnerability in nth-check.

svgo 2 has an updated API so this requires some code changes.

connot create my own sprites from a folder of svg's?

That's why ？ when using the my folder of svg's ,the result is The result of sprites is incomplete.but the json of sprites is ok.thanks!

optimization potential: skip unneeded png encoding

If performance needs to improve, a potential optimization exists someone could work on:

Instead of encoding a png and passing to mapnik.blend (which only works currently with encoded images)
Pass the raw mapnik.Image returned from svg rasterization
Replace mapnik.blend with manual, lower level compositing using image.composite

Spritezero produces invalid content boxes

Running spritezero on certain SVGs with a content box that is close to the edge of the bounding box sometimes produces a content box that extends beyond the bounds of the sprite.

For example, when I create a spritesheet from the SVG below using the JS snippet in the README, I get the following output.

SVG content

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.0"
   width="22.999981"
   height="21.999981"
   id="svg2"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
   sodipodi:docname="US:AR_airport.svg">
  <metadata
     id="metadata3037">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1029"
     id="namedview3035"
     showgrid="true"
     inkscape:showpageshadow="false"
     inkscape:zoom="14.151908"
     inkscape:cx="-7.4924318"
     inkscape:cy="10.999965"
     inkscape:window-x="0"
     inkscape:window-y="27"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2"
     inkscape:document-rotation="0"
     inkscape:pagecheckerboard="true">
    <inkscape:grid
       type="xygrid"
       id="grid3031"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       originx="-12.499994"
       originy="-13.000035" />
  </sodipodi:namedview>
  <defs
     id="defs4" />
  <path
     inkscape:connector-curvature="0"
     style="fill:#004187;fill-opacity:1;stroke-width:1"
     id="path3797"
     d="M 3.170379,20.381928 V 18.763903 H 2.039678 0.908976 V 12.771441 6.778978 L 0.46953,3.487356 C 0.227834,1.676964 0.023314,0.151695 0.01504,0.09787 L 0,0 h 10.316001 10.316001 l 0.132632,0.06205 c 0.211466,0.09893 0.307906,0.224501 0.371011,0.48308 0.04693,0.192348 0.05,0.239856 0.02525,0.391458 -0.0155,0.0949 -0.04299,0.284108 -0.06108,0.420466 -0.02605,0.196308 -0.05819,0.304973 -0.154386,0.521944 -0.115465,0.260418 -0.121922,0.286976 -0.130211,0.534993 l -0.0087,0.180973 0.09966,0.151766 0.09966,0.07177 h 0.99477 0.994772 v 0.633453 0.633453 l 0.0046,0.04333 C 22.9369,4.298897 22.9246,4.369277 22.9246,4.560288 l -0.159999,0.468231 -0.263645,0.662227 c -0.305261,0.659351 -0.345703,0.762625 -0.362218,0.924908 -0.02524,0.248071 -0.206229,1.066901 -0.301512,1.364086 -0.04266,0.133049 -0.121249,0.413603 -0.17465,0.623455 -0.100758,0.395931 -0.08756,0.448111 -0.382065,0.88535 -0.07039,0.104496 -0.223658,0.334819 -0.224226,0.453295 -1.59e-4,0.03428 -0.06614,0.271363 -0.244371,0.624627 -0.178744,0.354279 -0.339216,0.706658 -0.35786,0.78583 -0.03962,0.168251 -0.672368,1.328598 -1.15271,2.113875 -0.27362,0.447323 -0.34863,0.596896 -0.61995,1.236202 -0.193903,0.45689 -0.322573,0.796494 -0.346071,0.913402 -0.02058,0.102352 -0.05441,0.262431 -0.07521,0.35573 -0.02864,0.12856 -0.03793,0.341984 -0.03831,0.881499 l -5e-4,0.631865 0.08676,0.34678 c 0.04772,0.146728 0.110672,0.365772 0.139883,0.486763 0.02921,0.120992 0.06983,0.333548 0.09025,0.374571 0.03157,0.0634 0.03602,0.1817 0.02972,1.241173 l -0.0074,1.166582 -0.08354,0.250895 c -0.04594,0.094 -0.133578,0.2303 -0.194735,0.302908 -0.06115,0.07261 -0.111191,0.139763 -0.111191,0.149239 0,0.02417 -0.06754,0.09168 -0.09243,0.09238 -0.01135,3.2e-4 -0.04891,0.02354 -0.08345,0.05161 -0.06201,0.05038 -0.157371,0.05104 -7.443784,0.05161 l -7.380968,6e-4 v -1.618028 z" />
  <g
     aria-label="AIRPORT"
     transform="matrix(0.46883974,0,0,0.53323125,-2e-6,5e-6)"
     id="text3056"
     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.2522px;line-height:0%;font-family:'Roadgeek 2005 Series D';-inkscape-font-specification:'Roadgeek 2005 Series D';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.87536"
     fill="#ffffff">
    <path
       d="M 6.4899225,2.2818776 5.2354105,5.6837111 H 7.7490129 Z M 5.9679722,1.3707539 h 1.048479 L 9.6216238,8.2064705 H 8.6601366 L 8.0374591,6.4529009 H 4.9561214 L 4.3334439,8.2064705 H 3.3582211 Z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path18" />
    <path
       d="m 10.619739,1.3707539 h 0.924859 v 6.8357166 h -0.924859 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path20" />
    <path
       d="m 16.626746,5.001513 q 0.297603,0.1007272 0.576892,0.43038 0.283868,0.3296527 0.567735,0.9065451 l 0.938595,1.8680324 H 17.716431 L 16.841936,6.4529009 Q 16.503126,5.7661243 16.18263,5.5417772 15.866713,5.3174302 15.317292,5.3174302 H 14.310019 V 8.2064705 H 13.38516 V 1.3707539 h 2.087801 q 1.172099,0 1.748991,0.4899007 0.576892,0.4899006 0.576892,1.4788589 0,0.6455701 -0.302181,1.0713716 Q 17.19906,4.8366866 16.626746,5.001513 Z M 14.310019,2.1307867 v 2.4266107 h 1.162942 q 0.668463,0 1.007272,-0.3067602 0.343389,-0.3113387 0.343389,-0.9111237 0,-0.5997849 -0.343389,-0.9019666 -0.338809,-0.3067602 -1.007272,-0.3067602 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path22" />
    <path
       d="m 20.82524,2.1307867 v 2.5685445 h 1.162942 q 0.64557,0 0.998115,-0.3342312 0.352545,-0.3342313 0.352545,-0.9523303 0,-0.6135204 -0.352545,-0.9477517 Q 22.633752,2.1307867 21.988182,2.1307867 Z M 19.900381,1.3707539 h 2.087801 q 1.149206,0 1.735255,0.5219502 0.590628,0.5173718 0.590628,1.5200656 0,1.0118509 -0.590628,1.5292226 Q 23.137388,5.459364 21.988182,5.459364 H 20.82524 v 2.7471065 h -0.924859 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path24" />
    <path
       d="m 28.329419,1.9980099 q -1.007272,0 -1.602479,0.7508758 -0.590628,0.7508757 -0.590628,2.0465943 0,1.29114 0.590628,2.0420158 0.595207,0.7508757 1.602479,0.7508757 1.007273,0 1.593322,-0.7508757 0.590628,-0.7508758 0.590628,-2.0420158 0,-1.2957186 -0.590628,-2.0465943 -0.586049,-0.7508758 -1.593322,-0.7508758 z m 0,-0.7508758 q 1.437653,0 2.298413,0.9660658 0.86076,0.9614873 0.86076,2.5822801 0,1.6162143 -0.86076,2.58228 -0.86076,0.9614873 -2.298413,0.9614873 -1.442231,0 -2.307569,-0.9614873 -0.86076,-0.9614872 -0.86076,-2.58228 0,-1.6207928 0.86076,-2.5822801 0.865338,-0.9660658 2.307569,-0.9660658 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path26" />
    <path
       d="m 36.176987,5.001513 q 0.297603,0.1007272 0.576893,0.43038 0.283867,0.3296527 0.567735,0.9065451 L 38.26021,8.2064705 H 37.266673 L 36.392177,6.4529009 Q 36.053367,5.7661243 35.732872,5.5417772 35.416954,5.3174302 34.867533,5.3174302 H 33.860261 V 8.2064705 H 32.935402 V 1.3707539 h 2.0878 q 1.172099,0 1.748992,0.4899007 0.576892,0.4899006 0.576892,1.4788589 0,0.6455701 -0.302182,1.0713716 -0.297603,0.4258015 -0.869917,0.5906279 z M 33.860261,2.1307867 v 2.4266107 h 1.162941 q 0.668463,0 1.007273,-0.3067602 0.343388,-0.3113387 0.343388,-0.9111237 0,-0.5997849 -0.343388,-0.9019666 -0.33881,-0.3067602 -1.007273,-0.3067602 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path28" />
    <path
       d="m 37.820673,1.3707539 h 5.782659 V 2.1491007 H 41.176721 V 8.2064705 H 40.247284 V 2.1491007 h -2.426611 z"
       style="font-size:9.37679px;line-height:1.25;stroke-width:1.87536"
       id="path30" />
  </g>
  <g
     id="g3958"
     transform="matrix(0.03940848,0,0,0.03940848,-0.554787,-1.2295342)"
     style="stroke-width:2">
    <path
       inkscape:connector-curvature="0"
       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3150"
       d="m 407.29132,160.93534 c -13.00139,4.27824 -26.00276,5.51325 -39.00414,12.91783 -8.36419,8.47139 -19.52985,36.55302 -29.38668,55.47294 -22.35389,2.31197 -31.16092,3.11915 -135.71303,65.18503 l 3.74011,-13.3576 h -11.75465 l -9.61745,11.22039 -55.03326,-30.98961 -24.57792,14.9605 11.22034,5.34305 33.12683,44.88147 -41.67566,42.74424 24.04362,-2.67151 30.9896,-34.19541 c 57.68925,4.15052 69.30799,-2.54677 106.86064,-9.61746 l -94.03736,83.88561 51.29311,-7.48025 72.13094,-69.45943 c 64.23036,-30.94631 42.37959,-16.22002 66.78789,-43.27857 25.11227,-12.07787 74.61221,-24.33723 75.33678,-46.48434 -5.05924,-10.43557 -23.50345,-7.48617 -35.26401,-11.2204 l 13.3245,-14.92745 -20.36502,-9.17768 -13.79733,2.19869 z" />
    <path
       inkscape:connector-curvature="0"
       style="fill:#004187;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3152"
       d="m 247.80867,291.29156 7.334,12.69076 20.02948,-9.92373 -8.01454,-12.77725 z" />
    <path
       inkscape:connector-curvature="0"
       style="fill:#004187;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3154"
       d="m 277.64707,292.63418 -8.00076,-12.76823 19.27618,-10.45331 9.32968,13.09732 z" />
    <path
       inkscape:connector-curvature="0"
       style="fill:#004187;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3156"
       d="m 291.29249,268.37154 19.59148,-10.98759 10.89132,13.35757 -21.16693,10.39829 z" />
    <path
       inkscape:connector-curvature="0"
       style="fill:#004187;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3158"
       d="m 323.07664,243.46452 -6.93217,-2.20599 -3.15081,3.4248 -0.31531,11.6045 11.68588,13.04226 c 10.854,-7.23779 17.68197,-11.95331 25.22232,-18.09753 z" />
    <path
       inkscape:connector-curvature="0"
       style="fill:#004187;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2"
       id="path3160"
       d="m 319.88338,234.90192 -2.04089,4.80873 33.55221,8.32988 1.65796,-10.68608 z" />
  </g>
  <rect
     id="mapbox-content"
     width="13.5"
     height="6.5"
     x="3.9999983"
     y="14.999977"
     fill="none"
     style="stroke-width:1" />
</svg>

{"US:AR_airport":{"width":22,"height":21,"x":0,"y":0,"pixelRatio":1,"content":[4,15,17.5,21.5]}}

While the height is 21px, the bottom right corner of the content box is set at 21.5px. This box is invalid, and causes my tileserver to choke when trying to load the spritesheet.

Bad space utilization when using lots of icons

Would it be possible to call ShelfPack's shrink when generating the image file, as currently we're seeing a large unused area of the sprite:

Whilst the png will compress the area, it is fully loaded as ARGB_8888 on Android wasting a lot of memory (especially on bigger @2x)

Update project with new version of node / mapnik

Error trying to npm install with node v.4.2.6 can we update the node version on this project?

> [email protected] install /Users/amyleewalton/amyleew/mapbox-gl-private-styles/node_modules/spritezero/node_modules/mapnik
> node-pre-gyp install --fallback-to-build

[mapnik] Success: "/Users/amyleewalton/amyleew/mapbox-gl-private-styles/node_modules/spritezero/node_modules/mapnik/lib/binding/node-v46-darwin-x64/mapnik.node" is installed via remote
npm ERR! Darwin 15.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.2.6
npm ERR! npm  v2.14.12
npm ERR! code ENOTSUP

npm ERR! notsup Unsupported
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
npm ERR! notsup Required: {"node":">=0.10 <0.11"}
npm ERR! notsup Actual:   {"npm":"2.14.12","node":"4.2.6"}

/cc @miccolis

Deformed png output

I get a wrong png output with the following svg file. It's independent of the output sprite's resolution, so I guess there's a problem with the svg reader module. I have also included a screenshot of how the real svg file looks like.

impossible to install because source code can't be gotten from amazon cloud

Because source code can't be gotten from amazon cloud, it's impossible to install. And also it's same when I tried with node@12 or node@10.

node-pre-gyp ERR! Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/mapnik/v3.7.2/node-v79-darwin-x64-Release.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v79 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp ERR! Tried to download(undefined): https://mapbox-node-binary.s3.amazonaws.com/mapnik/v3.7.2/node-v79-darwin-x64-Release.tar.gz
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (node-v79 ABI, unknown) (falling back to source compile with node-gyp)

[Update]
I tried direct source build from node-mapnik to make my own pre-built like below:

git clone https://github.com/mapnik/node-mapnik
make

Finally I got the pre-built, mapnik.node came out in build/Release directory as a build result.
What should I do next?

background of svg lost while concat to png

background,blur and circle of svg lost while concated to png.

svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45.1 (43504) - http://www.bohemiancoding.com/sketch -->
    <title>建筑</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="8" cy="8" r="8"></circle>
        <filter x="-12.5%" y="-6.2%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <path d="M8.1802315,5.77885759 L9.1802315,5.57885759 L9.1802315,5.57885759 C10.263351,5.36223369 11.3170012,6.06466717 11.5336251,7.14778667 C11.5594544,7.27693304 11.5724638,7.40831497 11.5724638,7.54001894 L11.5724638,12.1004111 L6.57246377,12.1004111 L6.57246377,7.74001894 L6.57246377,7.74001894 C6.57246377,6.7866569 7.2453831,5.96582727 8.1802315,5.77885759 Z" id="path-3"></path>
        <path d="M2.78462517,1.5807438 L5.78462517,0.295029516 L5.78462517,0.295029516 C6.79988474,-0.140081726 7.97564259,0.330221413 8.41075383,1.34548098 C8.51744827,1.59443468 8.57246377,1.86246602 8.57246377,2.13331958 L8.57246377,12.1002415 L1.57246377,12.1002415 L1.57246377,3.41903386 L1.57246377,3.41903386 C1.57246377,2.61897764 2.04925748,1.89590139 2.78462517,1.5807438 Z" id="path-4"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="最终方案展示" transform="translate(-444.000000, -607.000000)">
            <g id="16px" transform="translate(445.000000, 606.000000)">
                <g id="建筑" transform="translate(0.000000, 1.000000)">
                    <g id="Oval-6">
                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                    </g>
                    <g id="Group" transform="translate(1.427536, 0.899758)">
                        <g id="Rectangle-5-Copy" transform="translate(9.072464, 8.600242) scale(-1, 1) translate(-9.072464, -8.600242) ">
                            <use fill="#FFC858" fill-rule="evenodd" xlink:href="#path-3"></use>
                            <path stroke="#986100" stroke-width="1" d="M7.07246377,11.6004111 L11.0724638,11.6004111 L11.0724638,7.54001894 C11.0724638,7.44124096 11.0627067,7.34270452 11.0433348,7.24584474 C10.8808669,6.43350511 10.0906292,5.90668 9.27828957,6.06914793 L8.27828957,6.26914793 C7.57715327,6.40937519 7.07246377,7.02499741 7.07246377,7.74001894 L7.07246377,11.6004111 Z"></path>
                        </g>
                        <path d="M1.07246377,11.1002143 L12.0724638,11.1002143 L12.0724638,11.1002143 C12.3486061,11.1002143 12.5724638,11.3240719 12.5724638,11.6002143 L12.5724638,11.6002143 L12.5724638,11.6002143 C12.5724638,11.8763566 12.3486061,12.1002143 12.0724638,12.1002143 L1.07246377,12.1002143 L1.07246377,12.1002143 C0.796321393,12.1002143 0.572463768,11.8763566 0.572463768,11.6002143 L0.572463768,11.6002143 L0.572463768,11.6002143 C0.572463768,11.3240719 0.796321393,11.1002143 1.07246377,11.1002143 Z" id="Rectangle-6" fill="#986100"></path>
                        <g id="Rectangle-5">
                            <use fill="#FFC858" fill-rule="evenodd" xlink:href="#path-4"></use>
                            <path stroke="#986100" stroke-width="1" d="M2.07246377,11.6002415 L8.07246377,11.6002415 L8.07246377,2.13331958 C8.07246377,1.93017941 8.03120214,1.7291559 7.95118131,1.54244063 C7.62484788,0.780995954 6.74302949,0.428268599 5.98158482,0.754602031 L2.98158482,2.04031632 C2.43005905,2.2766845 2.07246377,2.8189917 2.07246377,3.41903386 L2.07246377,11.6002415 Z"></path>
                        </g>
                        <path d="M4.07246377,4.10021426 L6.07246377,4.10021426 L6.07246377,4.10021426 C6.34860614,4.10021426 6.57246377,4.32407189 6.57246377,4.60021426 L6.57246377,4.60021426 L6.57246377,4.60021426 C6.57246377,4.87635664 6.34860614,5.10021426 6.07246377,5.10021426 L4.07246377,5.10021426 L4.07246377,5.10021426 C3.79632139,5.10021426 3.57246377,4.87635664 3.57246377,4.60021426 L3.57246377,4.60021426 L3.57246377,4.60021426 C3.57246377,4.32407189 3.79632139,4.10021426 4.07246377,4.10021426 Z" id="Rectangle-7" fill="#986100"></path>
                        <path d="M4.07246377,6.10021426 L6.07246377,6.10021426 L6.07246377,6.10021426 C6.34860614,6.10021426 6.57246377,6.32407189 6.57246377,6.60021426 L6.57246377,6.60021426 L6.57246377,6.60021426 C6.57246377,6.87635664 6.34860614,7.10021426 6.07246377,7.10021426 L4.07246377,7.10021426 L4.07246377,7.10021426 C3.79632139,7.10021426 3.57246377,6.87635664 3.57246377,6.60021426 L3.57246377,6.60021426 L3.57246377,6.60021426 C3.57246377,6.32407189 3.79632139,6.10021426 4.07246377,6.10021426 Z" id="Rectangle-7-Copy" fill="#986100"></path>
                        <path d="M4.07246377,8.10021426 L6.07246377,8.10021426 L6.07246377,8.10021426 C6.34860614,8.10021426 6.57246377,8.32407189 6.57246377,8.60021426 L6.57246377,8.60021426 L6.57246377,8.60021426 C6.57246377,8.87635664 6.34860614,9.10021426 6.07246377,9.10021426 L4.07246377,9.10021426 L4.07246377,9.10021426 C3.79632139,9.10021426 3.57246377,8.87635664 3.57246377,8.60021426 L3.57246377,8.60021426 L3.57246377,8.60021426 C3.57246377,8.32407189 3.79632139,8.10021426 4.07246377,8.10021426 Z" id="Rectangle-7-Copy-2" fill="#986100"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

png

Don't use Mapnik in generateLayout?

Currently, spritezero uses Mapnik in the generateLayout step. While this is helpful when the layout is passed to generateImage, it is a lot of unneeded work when the layout json is all an application needs.

Can we move this logic to the generateImage step? It would mean needing to calculate an icons width with something other than Mapnik Image.

mapnik.blend throws errors

If you pass an empty layout to spritezero.generateImage, an error is thrown (instead of passed to the callback function) when an empty array is passed to mapnik.blend.

I ticketed this upstream in mapnik/node-mapnik#515, but thought it would be worth being aware of here as well.

spritezero.generateImage({
    width:0,
    height:0,
    items:[]
}, function(err) {
    if (err) console.log('got an error!');
    else console.log('at least we made it');
});

map one image to multiple image names

In the context of Mapbox GL sprites, I often use the same symbol to differently-named amenities (police and prison, for example). Instead of keeping track of multiple identical images, I'd like a way to map multiple names to one image.

Practically, in the sprite json, this means multiple sprite objects referring to the same pixel coords.

Benefits:

Major: Updates to images will automatically apply to all its referents, without danger of forgetting one and having them fall out of sync.

Minor: Will need only one instance of each symbol in the PNG sheet, saving a few bytes here and there.

Error: SVG parse error: Unable to parse '��ࡱ�

I'm trying to export an atlas using a bouch of SVG.

When I run the command spritezero sprite export_svg I get the following error:

$ spritezero sprite export_svg
C:\Users\myuser\AppData\Roaming\npm\node_modules\@mapbox\spritezero-cli\bin\spritezero:85
        if (err) throw err;
                 ^

Error: SVG parse error:
Unable to parse '���ࡱ��

SVG boundaries/positioning not being respected?

Hello,

I'm trying to create a sprite which includes many images similar to the one below (SVG code). All are in SVG format, and I've modified them adding the "transform" property on line 16, for translating and rotating the image, and changing the document size on line 4 (was originally 50x75).

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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="260px" height="260px" viewBox="0 0 260 260" enable-background="new 0 0 260 260" xml:space="preserve">
<g id="Layer_1_1_">
</g>
<g id="Layer_2_1_">
	<g>
		<g>
			<polygon fill="#FFFFFF" points="25.1,27.7 25,27.7 25,27.7 			"/>
			<path fill="none" d="M25,27.7L25,27.7L25,27.7L25,27.7z M25,27.7L25,27.7L25,27.7L25,27.7z M12.7,24.8l0.1,0.1h24.4l0.1-0.1H12.7
				z M25,27.7L25,27.7L25,27.7L25,27.7z"/>
		</g>
	</g>
	<g>
		<g transform="translate(105) rotate(0, 25, 130)">
			<path fill="#FFFFFF" d="M25,27.7L25,27.7L25,27.7L25,27.7z"/>
			<path fill="#231F20" d="M0.3,24.9V35h19.6v39.2h10.2V35h19.6V24.9H0.3z M46.8,32.1H27.2v39.2h-4.4V32.1H3.2v-4.4h43.7L46.8,32.1
				L46.8,32.1z M25.1,27.7L25.1,27.7L25.1,27.7L25.1,27.7z"/>
			<path d="M25,27.7L25,27.7L25,27.7L25,27.7z"/>
			<polygon fill="#FFFFFF" points="46.8,27.8 46.8,32.1 27.2,32.1 27.2,71.3 22.8,71.3 22.8,32.1 3.2,32.1 3.2,27.8 			"/>
		</g>
	</g>
</g>
<circle fill="none" cx="25" cy="10.9" r="8.8"/>
</svg>

If I run svg2png directly on this file, the output is what I expect - a 260x260 px image with the graphic centered above the horizon:

However, when running spritezero, it puts the graphic arbitrarily in the lower right hand corner of this area, as seen below:

As I'm trying to create a sprite with a large number of similar graphics (with varying sizes), this is causing quite an issue. Am I doing something wrong with modifying the SVG? I'm confused as to why I'm getting a different output from svg2png - isn't this what spritezero is using in the background?

Any help or advice would be greatly appreciated. Thanks so much.

Link in documentation 404

Hello,
there is a problem in readme.md. Link http://mapbox.github.io/spritezero/ show 404 page

the png is incorrect

I download some svg from iconfont, but the generated png is wrong.

the generated json:

{
  "s1": {
    "height": 64,
    "pixelRatio": 2,
    "width": 64,
    "x": 0,
    "y": 0
  },
  "s2": {
    "height": 64,
    "pixelRatio": 2,
    "width": 64,
    "x": 64,
    "y": 0
  },
  "s3": {
    "height": 64,
    "pixelRatio": 2,
    "width": 64,
    "x": 0,
    "y": 64
  },
  "s4": {
    "height": 64,
    "pixelRatio": 2,
    "width": 64,
    "x": 64,
    "y": 64
  }
}

the result should be:

but the generated png:

the svg file1:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1589531854168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2487" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M513.8 247.2C367.8 247.2 249 366 249 512s118.8 264.8 264.8 264.8S778.6 658 778.6 512 659.8 247.2 513.8 247.2z m0 484.6C392.6 731.8 294 633.2 294 512c0-121.2 98.6-219.8 219.8-219.8S733.6 390.8 733.6 512c0 121.2-98.6 219.8-219.8 219.8z" fill="#333333" p-id="2488"></path><path d="M908 512c0-3.3-0.8-6.4-2.1-9.3-2.2-99.3-41.9-196-115.8-269.8C674.6 117.3 503 84.8 353.2 150.2c-11.4 5-16.6 18.2-11.6 29.6 5 11.4 18.2 16.6 29.6 11.6 132.8-58 284.8-29.2 387.2 73.3s131.2 254.4 73.3 387.2c-5 11.4 0.2 24.6 11.6 29.6 2.9 1.3 6 1.9 9 1.9 8.7 0 16.9-5 20.6-13.5 21-48.2 31.8-98.6 33.1-148.7 1.2-2.8 2-5.9 2-9.2z" fill="#27A27D" p-id="2489"></path><path d="M651 832.6c-132.8 57.9-284.8 29.1-387.2-73.3-102.4-102.5-131.2-254.4-73.3-387.2 5-11.4-0.2-24.6-11.6-29.6s-24.7 0.2-29.6 11.6c-65.4 149.8-32.9 321.4 82.7 437 76 76 176.1 116.1 278.4 116.1 53.3 0 107.3-10.9 158.7-33.3 11.4-5 16.6-18.2 11.6-29.6-5-11.5-18.3-16.7-29.7-11.7z" fill="#333333" p-id="2490"></path><path d="M263.8 264.7c8.8-8.8 8.8-23 0-31.8s-23-8.8-31.8 0-8.8 23 0 31.8 23 8.8 31.8 0z" fill="#27A27D" p-id="2491"></path><path d="M758.4 759.3c-8.8 8.8-8.8 23 0 31.8s23 8.8 31.8 0 8.8-23 0-31.8-23.1-8.8-31.8 0z" fill="#333333" p-id="2492"></path></svg>

the svg file2:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1589531898642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2643" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M659.5 478.2c18.6 0 33.8 15.1 33.8 33.8 0 18.6-15.1 33.7-33.8 33.7-18.7 0-33.8-15.1-33.8-33.7 0-18.7 15.1-33.8 33.8-33.8M512 478.2c18.6 0 33.8 15.1 33.8 33.8 0 18.6-15.1 33.7-33.8 33.7-18.7 0-33.8-15.1-33.8-33.7 0-18.7 15.1-33.8 33.8-33.8M364.5 478.2c18.7 0 33.8 15.1 33.8 33.8 0 18.6-15.1 33.7-33.8 33.7-18.6 0-33.8-15.1-33.8-33.7 0.1-18.7 15.2-33.8 33.8-33.8" fill="#27A27D" p-id="2644"></path><path d="M129.5 827V521.2c0-214.3 170.1-390 379.2-391.7 102.8-0.3 200.6 38.9 273.7 112s112.9 170.3 112 273.8C892.7 724.4 717 894.5 502.7 894.5H197c-37.2 0-67.5-30.3-67.5-67.5z m379.6-652.5C324.6 176 174.5 331.6 174.5 521.2V827c0 12.4 10.1 22.5 22.5 22.5h305.7c189.6 0 345.2-150.1 346.7-334.6 0.8-91.3-34.3-177.1-98.9-241.6-63.8-63.8-148.4-98.8-238.6-98.8h-2.8z" fill="#333333" p-id="2645"></path></svg>

the svg file3:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1589531915090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2766" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M776.2 894.5H247.8c-30.9 0-60.8-12.9-82-35.5-21.2-22.5-32.2-53.2-30.3-84l33.8-540c3.7-59.2 53-105.5 112.3-105.5h460.9c59.3 0 108.6 46.3 112.3 105.5l33.8 540c1.9 30.9-9.1 61.5-30.3 84-21.3 22.6-51.2 35.5-82.1 35.5z m-494.7-720c-35.6 0-65.1 27.8-67.4 63.3l-33.8 540c-1.2 18.8 5.3 36.7 18.2 50.4 12.9 13.7 30.4 21.3 49.2 21.3h528.4c18.8 0 36.3-7.6 49.2-21.3 12.9-13.7 19.3-31.6 18.2-50.4l-33.8-540c-2.2-35.5-31.8-63.3-67.4-63.3H281.5z" fill="#333333" p-id="2767"></path><path d="M512 504.7c-114.4 0-207.5-93.1-207.5-207.5 0-12.4 10.1-22.5 22.5-22.5s22.5 10.1 22.5 22.5c0 89.6 72.9 162.5 162.5 162.5s162.5-72.9 162.5-162.5c0-12.4 10.1-22.5 22.5-22.5s22.5 10.1 22.5 22.5c0 114.5-93.1 207.5-207.5 207.5z" fill="#27A27D" p-id="2768"></path></svg>

the svg file4:

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1589531925100" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2889" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M582.6 917H253.3c-37.2 0-67.5-30.3-67.5-67.5v-675c0-37.2 30.3-67.5 67.5-67.5h517.5c37.2 0 67.5 30.3 67.5 67.5v486.8c0 141-114.7 255.7-255.7 255.7zM253.3 152c-12.4 0-22.5 10.1-22.5 22.5v675c0 12.4 10.1 22.5 22.5 22.5h329.3c116.2 0 210.7-94.5 210.7-210.7V174.5c0-12.4-10.1-22.5-22.5-22.5H253.3z" fill="#333333" p-id="2890"></path><path d="M676.6 356.8H347.4c-12.4 0-22.5-10.1-22.5-22.5s10.1-22.5 22.5-22.5h329.1c12.4 0 22.5 10.1 22.5 22.5s-10 22.5-22.4 22.5zM512 491.8H347.4c-12.4 0-22.5-10.1-22.5-22.5s10.1-22.5 22.5-22.5H512c12.4 0 22.5 10.1 22.5 22.5s-10.1 22.5-22.5 22.5z" fill="#27A27D" p-id="2891"></path></svg>

the module i can't install

any of node's versions i can't install the spritezero can you tell me how to do

Error installing spritezero

I was using spritezero-cli but I think the CLI version is not up to date and have very old dependencies.. node 8 and a previues version of spritezero.

I'm trying to install spritezero and run it via a node script but I get this error:

node-pre-gyp WARN Using needle for node-pre-gyp https download 
node-pre-gyp WARN Tried to download(403): https://mapbox-node-binary.s3.amazonaws.com/mapnik/v4.4.0/node-v72-win32-x64-Release.tar.gz 
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp) 
'mapnik-config' is not recognized as an internal or external command,
operable program or batch file.
gyp: Call to 'mapnik-config --ldflags' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (C:\Users\hsantos\AppData\Roaming\nvm\v12.14.0\node_modules\npm\node_modules\node-gyp\lib\configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Windows_NT 10.0.18363
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\hsantos\\AppData\\Roaming\\nvm\\v12.14.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configu
re" "--fallback-to-build" "--module=D:\\_DESKTOP\\Sinaletica\\node_modules\\mapnik\\lib\\binding\\mapnik.node" "--module_name=mapnik" "--module_path=D:\\_DESKTOP\\Sinaletica\\node_modules\\mapnik\\lib\\binding" "--napi_version=5" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v72" "--msvs_version=2017"
gyp ERR! cwd D:\_DESKTOP\Sinaletica\node_modules\mapnik
gyp ERR! node -v v12.14.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\hsantos\AppData\Roaming\nvm\v12.14.0\node_modules\npm\node_modules\node-gyp\bin\node-g
yp.js configure --fallback-to-build --module=D:\_DESKTOP\Sinaletica\node_modules\mapnik\lib\binding\mapnik.node --module_name=mapnik --module_path=D:\_DESKTOP\Sinaletica\node_modules\mapnik\lib\binding --napi_version=5 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72 --msvs_version=2017' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (D:\_DESKTOP\Sinaletica\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
node-pre-gyp ERR! System Windows_NT 10.0.18363
node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\_DESKTOP\\Sinaletica\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd D:\_DESKTOP\Sinaletica\node_modules\mapnik
node-pre-gyp ERR! node -v v12.14.0
node-pre-gyp ERR! node-pre-gyp -v v0.13.0
node-pre-gyp ERR! not ok
Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\hsantos\AppData\Roaming\nvm\v12.14.0\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=D:\_DESKTOP\Sinaletica\node
_modules\mapnik\lib\binding\mapnik.node --module_name=mapnik --module_path=D:\_DESKTOP\Sinaletica\node_modules\mapnik\lib\binding --napi_version=5 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72 --msvs_version=2017' (1)
npm WARN [email protected] No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\hsantos\AppData\Roaming\npm-cache\_logs\2020-07-03T12_22_46_075Z-debug.log

I have visual studio 2019 community edition installed with the C++ libs.

Can someone help me out installing spritezero?

Use Async interfaces to svg rasterization and image encoding

After bugs are solved like #3, it would likely help performance to start using the async interfaces node-mapnik provides. So mapnik.Image.fromSVGBytes and image.encode instead of their sync versions currently in use at

spritezero/index.js

Lines 19 to 20 in bd25089

 var image = mapnik.Image.fromSVGBytesSync(img.svg, { scale: pixelRatio }); 

 var buffer = image.encodeSync('png');

	var image = mapnik.Image.fromSVGBytesSync(img.svg, { scale: pixelRatio });
	var buffer = image.encodeSync('png');