svg-sprite / grunt-svg-sprite

SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PhantomJS on Windows (Was: phantomjs-node: You don't have 'phantomjs' installed)

zenopopovici opened this issue · comments

It works fine on my Mac, but when I try to run it on Windows 8 I get this:

phantomjs-node: You don't have 'phantomjs' installed

PhantomJS is installed and works fine, I've added it to the global path, it shows up if I type phantomjs
No errors during npm install

Any thoughts?

Hi @zenopopovici,

thanks for reporting this. To be honest: I never tried installing iconizr on a Windows machine (in fact, I don't even have a Windows machine with a Node.js installation within reach). I would really like to help you with this, but I probably won't have the resources to set up the necessary environment in the near future. Maybe someone out there could jump in?

Cheers & good luck,
Joschi

Hey @jkphl,

Thanks for the support. I'll ask around some more. I also have hard times getting on Windows, but this developer I'm remotely working with, uses it.

I have discovered a possible workaround. These are the recommendations from the phantomjs readme file. Could you please set the weak parameter to false in svg-sprite ?

Use it in Windows

It would use dnode with weak module by default. It means that you need to setup node-gyp with Microsoft VS2010 or VS2012, which is a huge installation on Windows.

dnodeOpts property could help you to control dnode settings, so you could disable weak by setting it false to avoid that complicated installations.

var phantom = require('phantom');

phantom.create(function (ph) {
  ph.createPage(function (page) {
    /* the page actions */
  });
}, {
  dnodeOpts: {
    weak: false
  }
});

@zenopopovici is right. The dependency on the weak module when in windows is forcing us to stick with grunticon because going the visual studio upgrade route is a hassle. (not bashing on grunticon but we were looking forward to having a single sprite png)

Hi @protodaniel,

thanks. Please feel free to submit an appropriate PR. I (still) don't have a Windows installation / setup handy (and in fact, never tried it yet) and won't be able to setup one in the very near future due to massive work overload, sorry.

Cheers,
Joschi

No worries. Looking into it. ;)

Unfortunately there are more library dependencies on the proper Windows VS installation than can be solved by fixing svg-sprite. I'll put this on hold for now. Sorry!

I am running into the same issue on Ubuntu 14.04.1 LTS:

Running "svgsprite:spriteSass" (svgsprite) task
Building SVG sprite from directory "svg" ...
phantomjs-node: You don't have 'phantomjs' installed

Just wanted to say that I'm having a similar issue. I have to mention that I don't know anything about the underlying process of converting an SVG to a sprite, so I apologize in advanced if this info is unhelpful or expected.

Environment: Ubuntu 14.04 LTS (running in a VM with Vagrant, if that matters to anybody)

That said, when I tried to use the plugin to create a sprite with a SVG file straight out of Inkscape, I did not get an error and the grunt-svg-sprite plugin seemed to complete without errors. I'm experimenting with SVG and sprites in a design I'm working on, and the output from this successful sprite creation didn't work - by that I mean the output file didn't seem to load in Chrome when I used <use xlink:href="sprite.svg#phapi_api".... It seems that I may have used an incorrect format for my SVG files, so I then tried to remove much of the "boilerplate" of the original SVG files and then again ran the grunt task. This time, I received the PhantomJS error.

The full contents of my SVG files are below. The first did NOT cause an issue, the second DID cause an issue.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="phapi_wip" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="1052.4" width="744.09" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <metadata id="metadata3073">
  <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>
 <g id="layer1" stroke-miterlimit="4" stroke="#000" stroke-dasharray="none">
  <path id="path3076" stroke-linejoin="round" d="m671.43,446.65a267.14,265.71,0,1,1,-534.29,0,267.14,265.71,0,1,1,534.29,0z" transform="translate(-62.857143,28.571428)" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3854" stroke-linejoin="miter" d="m117.34,334.82,0,283.54" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3856" stroke-linejoin="miter" d="m197.04,256.45,0,175.56" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3858" stroke-linejoin="miter" d="m124.33,423,71.721,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3860" stroke-linejoin="miter" d="m237.49,233.9,0,481.06" stroke-linecap="butt" stroke-width="18.16612816" fill="none"/>
  <path id="path3862" stroke-linejoin="miter" d="m347.65,211.92,0,529.32" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3864" stroke-linejoin="miter" d="m237.83,445.26,106.27,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3866" stroke-linejoin="miter" d="m355.88,469.5,248.89,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3868" stroke-linejoin="miter" d="m491.94,476.92,0,65.986" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3870" stroke-linejoin="miter" d="m501.04,534.13,93.944,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3874" stroke-linejoin="miter" d="m353.27,279.27,225.02,72.488" stroke-linecap="butt" stroke-width="17.55105209" fill="none"/>
  <path id="path3876" stroke-linejoin="miter" d="m354.41,425.27,233.82-41.889" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3886" stroke-linejoin="round" d="m87.883,284.65a26.264,26.264,0,1,1,-52.528,0,26.264,26.264,0,1,1,52.528,0z" transform="translate(392.94933,311.12698)" stroke-width="18" fill="#f21830"/>
  <path id="path3888" stroke-linejoin="miter" d="m344.98,704.35,70.681-69.671" stroke-linecap="butt" stroke-width="18" fill="none"/>
 </g>
</svg>
<g id="layer1" stroke-miterlimit="4" stroke="#000" stroke-dasharray="none">
  <path id="path3076" stroke-linejoin="round" d="m671.43,446.65a267.14,265.71,0,1,1,-534.29,0,267.14,265.71,0,1,1,534.29,0z" transform="translate(-62.857143,28.571428)" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3854" stroke-linejoin="miter" d="m117.34,334.82,0,283.54" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3856" stroke-linejoin="miter" d="m197.04,256.45,0,175.56" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3858" stroke-linejoin="miter" d="m124.33,423,71.721,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3860" stroke-linejoin="miter" d="m237.49,233.9,0,481.06" stroke-linecap="butt" stroke-width="18.16612816" fill="none"/>
  <path id="path3862" stroke-linejoin="miter" d="m347.65,211.92,0,529.32" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3864" stroke-linejoin="miter" d="m237.83,445.26,106.27,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3866" stroke-linejoin="miter" d="m355.88,469.5,248.89,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3868" stroke-linejoin="miter" d="m491.94,476.92,0,65.986" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3870" stroke-linejoin="miter" d="m501.04,534.13,93.944,0" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3874" stroke-linejoin="miter" d="m353.27,279.27,225.02,72.488" stroke-linecap="butt" stroke-width="17.55105209" fill="none"/>
  <path id="path3876" stroke-linejoin="miter" d="m354.41,425.27,233.82-41.889" stroke-linecap="butt" stroke-width="18" fill="none"/>
  <path id="path3886" stroke-linejoin="round" d="m87.883,284.65a26.264,26.264,0,1,1,-52.528,0,26.264,26.264,0,1,1,52.528,0z" transform="translate(392.94933,311.12698)" stroke-width="18" fill="#f21830"/>
  <path id="path3888" stroke-linejoin="miter" d="m344.98,704.35,70.681-69.671" stroke-linecap="butt" stroke-width="18" fill="none"/>
 </g>

Hi @develpr,

as I'm in a hurry just two very short things:

  1. If you want to use the sprite with <use xlink:href="..."/> you will have to use the inline embeddable sprite variant, but you surely know this, right?
  2. The second file you posted is not a valid SVG file, as it is missing the outermost SVG element <svg xmlns="http://www.w3.org/2000/svg">. This will definitely cause issues, yes.

Cheers,
Joschi

Hi @zenopopovici & @protodaniel & @4DiGITS & @develpr,

I just published the next major release of grunt-svg-sprite. It's rewritten from scratch and possibly your issues are no issues any longer— could you please check this? I'll do some tests on Windows myself in the next few days, but your help would be greatly apreciated!

I'll close the issue for now, but please feel free to re-open it in case you've still got problems.

Cheers & a happy new year,
Joschi