dbushell / grunt-svg2png

Grunt plugin to rasterize SVG to PNG images using PhantomJS

David Bushell

grunt-svg2png's Issues

flatten: true not working

svg2png: {
      app: {
        files: [{
          expand: true,
          flatten: true,
          cwd: 'components/app',
          src: ['**/*.svg'],
          dest: 'build/assets/img'
        }]
      }
    },

when options set to flatten:true it still keeps all paths in dest

thanks!

Not rasterizing

I'm using this configuration...

svg2png: {
  build: {
    files: [{
      cwd: 'src/',
      src: ['svgs/**/*.svg'],
      dest: 'public/imgs',
      expand: false
    }]
  }
}

And this is the result...

Running "svg2png:build" (svg2png) task

Rasterizing SVG to PNG (3 files)...
0% [     ] 0.00% (0.1s) 
>> Rasterization complete.

It finds my SVG images but doesn't rasterize them.

I'm on a MAC OS Sierra v.10.12.6

Process hangs even though it is pointing to the right files

I'm using the latest version of grunt-svg2png with grunt v0.4.4.

Here is my task config:

svg2png: {
      all: {
        files: [
          { cwd: '<%= pkg.path.images_source %>', src: ['layout/*.svg'], dest: '<%= pkg.path.images_source %>/layout/raster/' },
          (...)
        ]
      }
    }

When I run grunt svg2png:all --verbose on this baby, I get this output:

Running "svg2png:all" (svg2png) task
Verifying property svg2png.all exists in config...OK
Files: layout/chevrons_black_down.svg, layout/chevrons_black_top.svg, layout/chevrons_gray_down.svg, layout/chevrons_gray_top.svg, layout/chevrons_red_down.svg, layout/chevrons_red_top.svg, layout/chevrons_white_down.svg, layout/chevrons_white_top.svg -> app/assets/images/source/layout/raster/

But then the process hangs for infinity without ever outputing any errors or actually rastering the files...

Any ideas ?

Prefix for png files

Would be great if you could prefix the generated png files so you could use along with https://github.com/jonathantneal/svg4everybody which is looking for a specifically named png file.

Allow size output setting of png

If i'm not mistaken, the size of the output png corresponds to the viewbox of the input svg. I would like to set a default output size of the exported png's. Is that possible with svg2png?

`spawn ENAMETOOLONG` when trying to process too many files or files with long pathes

I've got an error Fatal error: spawn ENAMETOOLONG when was tying to process too many files or files has too long pathes.

My config:

        svg2png:
            icons:
                files: [
                    expand: false,
                    cwd: 'src/files/icons/svg/',
                    src: ['*.svg'],
                    dest: 'src/files/icons/png/',
                ]

Could you investigate please?

Fatal error: write EPIPE

Running this inside a Vagrant machine, I get this:

Rasterizing SVG to PNG (20 files)...
0% [                      ] 0.00% (0.1s) Fatal error: write EPIPE

Any ideas?

Progress bar is too long

When converting a lot of files the progress bar, which uses a 1:1 mapping between files and ticks in the bar, ends up taking multiple lines and generally breaks. The progress bar should instead use process.stdout.columns to get the width of the terminal and show progress within that scale.

update ‘phantomjs’ package references to ‘phantomjs-prebuilt’

warning grunt-svg2png > [email protected]: Package renamed to phantomjs-prebuilt. Please update ‘phantomjs’ package references to ‘phantomjs-prebuilt’

Fails on Mac OS Sierra

Phantom.js < v2 doesn't work on Sierra for some reason. By amending the packages.json to require phantom.js ~2, the package starts working again. Not sure if this has any implications on other operating systems.

Task Hangs

Hey, can anybody chime in on why this library stalls?

Environment:

OS: Windows 7 64bit
node (64bit): v4.3.0
grunt-cli (global): 0.1.13
grunt: 0.4.5
grunt-svg-to-png: 0.2.5 (I even tried 0.2.7)

cat GruntFile.js:
...
svg2png: {
all: {
files: [
{ src: ['images/icons/svg/*.svg'], dest: 'images/icons/png/' }
]
}
}
...

Additionally, I tried replacing the GruntFile line with: { cwd: '.', src: ['images/icons/svg/*.svg'], dest: 'images/icons/png/' }, but this failed too.

Console log:
Rasterizing SVG to PNG (206 files)...
...............................................................................................................................................................................................................

6.2s

Image widths/aspect ratios not maintained

I have a series of svg files with 300x300 viewboxes:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" enable-background="new 0 0 300 300">

But grunt-svg2png creates 400x300 PNGs. Given the scalable nature of SVG I could understand the dimensions changing, but the aspect ratio should be maintained.

PNG:

Original SVG

Dynamic mapping / rasterization bug

I'm using svg2png to render fallback png's and am encountering several bugs: when I run grunt svg2png with this config:

  build: {
    files: [{
      cwd: 'src/assets/ico',
      src: ['*.svg'],
      dest: 'build',
      ext: '.png'
    }]
  }

it hangs at 0% when rasterizing.

Adding expand

When I add expand:true the rasterization works, but folder structure it outputs is wrong. With src/assets/ico/test.svg the result is build/test.png/src/assets/ico/test.png. So it outputs the filename as a folder first and then messes up the folder structure (I believe it should be build/assets/ico/test.png). When I fiddle around with the cwd and src it keeps outputting the filename as a folder.

Removing ext

When I remove ext:'png' the folder structure becomes: build/test.svg/src/assets/ico/test.png.

Summary

1. Doesn't work without expand:true
2. Weird dynamic mapping behaviour

Any idea what's going wrong? To me it seems like there's something wrong with svg2png's implementation of grunt's dynamic mapping syntax, since similar syntax seems to work just fine with other plugins (copy for example).

Doesn't work with dynamic src-dest file mapping

See: http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

Example:

svg2png: {
  dist: {
    files: [{
      expand: true,
      cwd: 'source/images/',
      src: ['*.svg'],
      dest: 'public/images/'
    }]
  }
}

Outputs:

Running "svg2png:dist" (svg2png) task

Rasterizing SVG to PNG (0 files)...

>> Rasterization complete.

Double size (@2x)

Would be great to have an option to specify if we want (or not) a second export at double size for hi-res displays. A suffix option would be even greater (@2x by default I guess).

Btw, thanks for your plugin, saved me hours of work :)

Module ignores grunt filter function

svg2png: {
    images: {
        files: [{
            src: ['private/svg/*.svg'],
            dest: 'build/tmp/',
            filter: function(filepath) {
                return false;
            }
        }]
    }
}

Output:

Expected result:

If the module is used for many files, progress bar gets duplicated many times

file pattern matching isn't accurate

This config is matching files in random folders in my project. some alongside the /img/ folder, and others. Let me know what info I can give you to help fix this.

        svg2png: {
            img: {
                files: [{
                    expand: true,
                    cwd: 'assets/img/',
                    src: ['**/*.svg']
                }]
            }
        },

Doesn't respect subfolders

Using this config, svg's in subfolders of 'img-source' (ie img-source/icons/somefile.svg) would be saved to the 'root' of the img dir (ie img/icons/somefile.png)

        svg2png: {
            img: {
                files: [{
                    expand: true,
                    cwd: '/assets/img-source/',
                    src: ['**/*.svg'],
                    dest: '/assets/img/'
                }]
            }
        },

svg2png 0.2.0 doesn't work for me (hangs)

I tried version 0.2.0, using config:

            svg2png: {
                all: {
                    files: [{
                            src: ['main/icons-src/common/*.svg'],
                            dest: 'main/icons/common/'
                        }
                    ]
                }
            },

Output:

Running "svg2png:all" (svg2png) task

Rasterizing SVG to PNG (25 files)...
0% [ =                         ] 4.00% (0.2s) ^C
Shutting down the watch task...OK

... it keept staying at the 4.00%, until I killed it manually.

With Version 0.1.2 and the same config, it works without any problems after a second.

Is this a known problem? Should I provide any more information for you to debug?

Output is SVG source on Windows

On Windows 7, the output is not the image, but an image of the source code for the SVG.

This only occurs if the SVG does not have an XML declaration. If I add <?xml version="1.0"?> to the document, it will work correctly.

SVG Source:

<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><path d="M1 0l24 24v-24z" fill="#fff"/><path d="M0 1l24 24h1v-5l-20-20h-5z" fill="#cc092f"/></svg>

svg2png fails without message; libfontconfig.so.1 dependency problem

Running "clean:build" (clean) task
>> 1 path cleaned.

Running "svgmin:icons" (svgmin) task
✔ src/box.svg (saved 412 B 40%)
✔ src/burger.svg (saved 653 B 25%)
✔ src/cake.svg (saved 617 B 33%)
✔ src/candy.svg (saved 832 B 24%)
✔ src/canned-drink.svg (saved 725 B 39%)
✔ src/cheese-cup.svg (saved 801 B 29%)
✔ src/chicken.svg (saved 752 B 31%)
✔ src/chips.svg (saved 706 B 40%)
✔ src/churro.svg (saved 658 B 44%)
✔ src/coffee.svg (saved 1.14 kB 38%)
✔ src/cookie.svg (saved 500 B 33%)
✔ src/corndog.svg (saved 510 B 45%)
✔ src/cotton-candy.svg (saved 712 B 34%)
✔ src/dippin-dots.svg (saved 541 B 24%)
✔ src/eggroll.svg (saved 509 B 36%)
✔ src/fountain-drink.svg (saved 610 B 36%)
✔ src/fries.svg (saved 699 B 43%)
✔ src/hotdog.svg (saved 445 B 34%)
✔ src/ice-cream.svg (saved 575 B 27%)
✔ src/lemonade.svg (saved 1.06 kB 36%)
✔ src/nachos.svg (saved 615 B 27%)
✔ src/peanuts.svg (saved 708 B 21%)
✔ src/pizza.svg (saved 526 B 31%)
✔ src/popcorn.svg (saved 987 B 35%)
✔ src/pretzel.svg (saved 2.23 kB 36%)
✔ src/quesadilla.svg (saved 1.7 kB 34%)
✔ src/sandwich.svg (saved 1.52 kB 25%)
✔ src/sausage.svg (saved 1.62 kB 29%)
✔ src/snowcone.svg (saved 537 B 34%)
✔ src/taco.svg (saved 877 B 24%)
✔ src/water-bottle.svg (saved 635 B 36%)
Total saved: 25.39 kB

Running "svg2png:images" (svg2png) task

Rasterizing SVG to PNG (31 files)...
0% [                                 ] 0.00% (0.1s) 
>> Rasterization complete.

Done, without errors.

No .png files are actually generated. The progress bar remains at 0%. I then ran strace -f -F -s 256 -o strace.log grunt svg2png --verbos https://clbin.com/Yp15a The interesting entry is listed below.

10793 read(14, "/home/ubuntu/SRIcons/node_modules/grunt-svg2png/node_modules/phantomjs/lib/phantom/bin/phantomjs: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory\n", 65536) = 214

After seeing this I ran sudo apt-get install libfontconfig1. I then ran the grunt command above again and success!

Environment

$ uname -a
Linux ip-10-184-149-222 3.13.0-35-generic #62-Ubuntu SMP Fri Aug 15 01:58:42 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 14.04.1 LTS
Release:    14.04
Codename:   trusty

Edit: Upon further inspection, it seems this may be a program with phantomjs (or the node wrapper). https://github.com/Medium/phantomjs/search?q=libfontconfig&type=Issues&utf8=%E2%9C%93 Could grunt-svg2png be made to fail (exit non-zero) if phantom fails? This would at least notify the user that there is a problem.

Warning: Path must be a string. Received [ 'path/to/one/of/the/svgs' ]

Svg2Png is failing with this error:

Warning: Path must be a string. Received [ 'path/to/one/of/the/svgs' ]

Environment: MacOS 10.12, Node v6.6.0, Npm v3.10.8
As I understand, this is a breaking change introduced recently in Node 6. On another computer with Node 5.9.0 it runs OK.

Should use a carraige return on the progress bar instead of a new line?

Currently the progress bar writes a new line for each incremental step of progress. It seems like the progress bar should be outputting a carraige return to overwrite the line instead. So:

Rasterizing SVG to PNG (30 files)...
0% [                                ] 0.00% (0.0s) 
0% [                                ] 3.33% (0.3s) 
0% [ ==                             ] 6.67% (0.4s) 
0% [ ===                            ] 10.00% (0.4s) 
0% [ ===                            ] 13.33% (0.5s) 
0% [ =====                          ] 16.67% (0.5s) 
0% [ ======                         ] 20.00% (0.5s) 
0% [ ======                         ] 23.33% (0.6s) 
0% [ ========                       ] 26.67% (0.6s) 
0% [ =========                      ] 30.00% (0.7s) 
0% [ =========                      ] 33.33% (0.7s) 
0% [ ===========                    ] 36.67% (0.7s) 
0% [ ============                   ] 40.00% (0.8s) 
0% [ ============                   ] 43.33% (0.8s) 
0% [ ==============                 ] 46.67% (0.8s) 
0% [ ===============                ] 50.00% (0.9s) 
0% [ ===============                ] 53.33% (0.9s) 
0% [ =================              ] 56.67% (1.0s) 
0% [ ==================             ] 60.00% (1.0s) 
0% [ ==================             ] 63.33% (1.0s) 
0% [ ====================           ] 66.67% (1.1s) 
0% [ =====================          ] 70.00% (1.1s) 
0% [ =====================          ] 73.33% (1.1s) 
0% [ =======================        ] 76.67% (1.2s) 
0% [ ========================       ] 80.00% (1.2s) 
0% [ ========================       ] 83.33% (1.3s) 
0% [ ==========================     ] 86.67% (1.3s) 
0% [ ===========================    ] 90.00% (1.3s) 
0% [ ===========================    ] 93.33% (1.4s) 
0% [ =============================  ] 96.67% (1.4s) 
0% [ ============================== ] 100.00% (1.4s) 
0% [ ============================== ] 100.00% (1.5s) 

>> Rasterization complete.

Vs.

Rasterizing SVG to PNG (30 files)...
0% [ ============================== ] 100.00% (1.1s) 
>> Rasterization complete.

(With an effect of a bar filling up over time).

This can be easily done by changing to a carraige return /r instead of a new line here:

process.stdout.write(str + (hasTerminal ? '' : "\n"));

Resize option

First this is a great plugin. I was thinking though would you think of including a way to resize the resulting png, eg. 2x or 3x?

Fatal error: spawn EACCES

I got this error all of a sudden when running svg2png. I've used the plugin before with the same settings without any issues so I'm not certain why it has started showing.

Here is the error:

Running "svg2png:all" (svg2png) task
Verifying property svg2png.all exists in config...OK
Files: assets/img/image1.svg, assets/img/image2.svg, assets/img/image3.svg, assets/img/image4.svg -> assets/img/

Rasterizing SVG to PNG (4 files)...
0% [ ] 0.00% (0.0s) Fatal error: spawn EACCES

I did a Google which suggested it's a permissions error, but I've got access to write to the assets/img folder as other image compression plugins are able to.

Any ideas of what could be causing the error?

Cheers
Mark